Javascript 如何将画布图像数据转换为具有适当x，y的每像素文本值数组？

我有一段生成随机图像的代码，但我想对图像进行解析，这样我就可以得到类似这样的东西，我可以将其写入文件中：

[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;
}

for（变量i=0，len=image.data.length；i

您只需执行以下操作：

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';

如果要手动创建标记，请在html中：

---

我不清楚您尝试做什么：像素的字符串版本应该是什么格式，是用于表示还是传输？生成的表是实际的表还是所有内容都是文本？两个数据行是否在两个版本（文本/数字）中具有相同的像素？下一个图像行是否应位于下方或水平继续？请详细说明。您说：“左上角的数据是0,0处像素的文本形式（假设0,0是左上角），因此上述数据将是2x3像素图像，0,1数据将位于正确的位置。”-什么是“0,1数据”，此外，“正确的位置”是什么，您如何知道-如何计算它。和Ken一样，我不清楚你的问题。@enhzflep抱歉，伙计们，我已经用粗体添加了一些信息，这些信息应该可以澄清问题。@Ken AbdiasSoftware在上面用粗体添加了一些细节。请查看此内容

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';