javascript - HTML5 Canvas 将原始图像数据保存到数据 URL

Question

我有一个函数，它获取图像，将其绘制到 Canvas 上，将其分割成 block ，并使用 getImageData 方法将这些 block 保存为图像数据，并将数据对象推送到数组中。最后我的数组看起来像这样

[ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData, ImageData]

每个 Imagedata 对象都具有这些属性

data: Uint8ClampedArray[17424]
height: 66
width: 66

我的问题是，除了将这些部分绘制回 Canvas 并将 Canvas 另存为 dataURL 之外，还有其他方法可以将此原始数据转换为 URL 字符串吗？

Answer 1

更新

要将每个部分编码为单独的 PNG，您需要使用 js-png-encoder以及以下 JavaScript:

var imageData = []; //Your image data array
var images = []; //completed images

for (i = 0; i < imageData.length; i++) { //Each block of canvas image
    var temp = "";
    for (j = 0; j < imageData[i].data.length; j++) { //Each byte
        temp += String.fromCharCode(imageData[i].data[j]);
    }
    var encoded = generatePng(imageData[i].width, imageData[i].height, temp);
    images.push("data:image/png;base64," + btoa(encoded)); //Push to final array
}

这段 JavaScript 代码将 Canvas 图像每个 block 中的数据转换为由代表每个字节的 ASCII 字符组成的字符串，并将其传递给generatePng()。然后使用 btoa() 将返回的结果编码为 base64，并在前面添加数据类型。生成的图像数组中的每个元素都可以设置为图像元素的 src 并显示。我对此进行了测试，它有效。

上一页

是的，您可以从 block 中的数据手动组装字符串，并使用btoa()将其转换为base64 JavaScript 函数并添加数据类型信息。具体方法如下:

var imageData = []; //Your image data array
var blocksWide = 10; //The number of blocks across the width of the canvas data, eg. Math.ceil(canvas.width/66)
var output = ""; //Where the base64 string will be stored

for (i = 0; i < imageData.length; i += blocksWide) { //each row of blocks

    for (k = 0; k < imageData[i].height; k++) { //each row of bytes

        var row = imageData[i].width * k; //the current row of bytes across the width

        for (l = 0; l < blocksWide; l++) { //each block on imageData row

            for (m = 0; m < imageData[i + l].width; m++) { //each byte on the current row in current block

                var row2 = imageData[i + l].width * row;
                output += String.fromCharCode(imageData[i + l].data[row2 + m]);
            }
        }
    }
}

output = "data:image/png;base64," + btoa(output);
console.log(output);

它可能需要一些调整才能完美工作，但它的工作原理是计算穿过 Canvas 宽度所需的 block 数，然后迭代每一行 block 。对于每一行，它通过以正确的顺序组装数组的内容来组装每行图像数据。最后，它将结果字符串转换为 base64 并在前面添加数据类型字符串。当然，人们会想知道为什么您不在分割图像之前简单地调用 toDataURL() 函数(消除了对此的需要)，但无论哪种方式，这都是另一种方法。