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

Question

I have a function which takes an image, draws it to the canvas, splits it up into blocks, and saves those blocks as image data using the getImageData method, and pushes the data objects to an array. In the end my array looks like this

[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]

With each of those Imagedata objects having these properties

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

My question is, apart from drawing each of these sections back to the canvas and saving the canvas as a dataURL is there another way to convert this raw data to a url string?

Answer 1

Update

To encode each section as an individual PNG, you'll need to use js-png-encoder and the following 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
}

This snippet of JavaScript converts the data in each block of the canvas image to a string composed of the ASCII characters representing each byte and passes it to generatePng(). The returned result is then encoded to base64 using btoa() and prepended with the datatype. Each element in the resulting images array can be set as the src for an image element and displayed. I tested this and it works.

Previous

Yes, you can assemble a string manually from the data in the blocks and convert it to base64 using the btoa() JavaScript function and prepend the datatype information. Here's how that can be done:

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

It may need a little tweaking to get it working perfectly, but it works by computing the number of blocks it would take to cross the width of the canvas, then iterates through each row of blocks. For each row, it assembles each line of image data by assembling the content of the arrays in the correct order. Finally, it converts the resulting string to base64 and prepends the datatype string. Of course, one would wonder why you wouldn't simply call the toDataURL() function before splitting the image (eliminating the need for this), but either way, this is another method.