0

我有一段代码可以生成随机图像，但我想解析图像，以便获得可以写入文件的类似内容：

[data],[data],[data]
[data],[data],[data]

左上角的数据将是 0,0 处像素的文本形式（假设 0,0 是左上角），因此上述数据将是 2x3 像素图像，而 0,1 数据将位于正确的位置。

所以基本上如果图像是 12x12 像素，那么文件将有 12 行，每行包含 12 个数据点（据我所知，每个像素都有 4 个颜色/alpha 值）。

这是创建图像的循环，所以也许有一种方法可以在这里提取上面表格中的数据：

for(var i = 0, len = image.data.length; i < len; i += 4){
    var x = Math.floor( (i / 4) % dstCanvas.width );
    var y = Math.floor( (i / 4) / dstCanvas.width );

    // since n is -1..1, add +1 and multiply with 127 to get 0..255
    var n = (noise.turbulence(x / gridSize, y / gridSize, 0, dstCanvas.width) + 1) * 127;

    image.data[i] = n;
    image.data[i+1] = n;
    image.data[i+2] = n;
    image.data[i+3] = 255;
}
4

1 回答 1

0

你可以简单地做：

var txtFile = '';

for(var i = 0, len = image.data.length; i < len; i += 4){
    var x = Math.floor( (i / 4) % dstCanvas.width );
    var y = Math.floor( (i / 4) / dstCanvas.width );

    // since n is -1..1, add +1 and multiply with 127 to get 0..255
    var n = (noise.turbulence(x / gridSize, y / gridSize, 0, dstCanvas.width) + 1) * 127;

    image.data[i] = n;
    image.data[i+1] = n;
    image.data[i+2] = n;
    image.data[i+3] = 255;

    /// handle textfile lines    
    if (x === 0 && y > 0) {
        /// chop off last comma and add linefeed
        txtFile = txtFile.substring(0, txtFile.length - 1) + '\n';
    }

    /// textual representation
    txtFile += 'rgba(' + n + ',' + n + ',' + n + ', 255),';
}

/// for final line
txtFile = txtFile.substring(0, txtFile.length - 1) + '\n';

文本格式只是一个示例，因为您没有指定确切的格式 - 只需根据需要进行调整。

然后在循环完成后，您可以将“文件”转换为 blob 并将其作为对锚标记的引用：

var file = new Blob([txtFile], {type:'text/text'});
var domURL = self.URL || self.webkitURL || self,
var url = domURL.createObjectURL(file);

var a = document.getElementById('fileAnchor');
a.href = url;
a.download = 'filename.txt';

如果您想手动创建标签，请在您的 html 中：

<a href="#" id="fileAnchor">Click here to download</a>

在线演示在这里

于 2013-10-17T18:40:08.367 回答