HTML5 Canvas将原始图片数据保存到数据网址 [英] HTML5 Canvas Saving Raw image data to data URL

问题描述

我有一个函数，它接受一个图像，绘制到画布，分割成块，并使用getImageData方法将这些块保存为图像数据，并将数据对象推送到数组。最后，我的数组看起来像这样

  [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 
 height：66 
 width：66 
  pre> 
 
 
我的问题是，除了将每个部分绘制回画布并将canvas保存为dataURL之外，还有另一种方法可以将原始数据转换为URL 
 $ p 
 
 
 
 
解决方案
要将每个部分编码为单个PNG，您需要使用 js-png-encoder 和以下JavaScript：
  var imageData = []; //您的图像数据数组
 var images = []; //完成的图像
 
 for（i = 0; i  var temp =; 
 for（j = 0; j  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代码片段转换每个块中的数据的画布图像转换为由表示每个字节的ASCII字符组成的字符串，并将其传递给generatePng（）。然后，返回的结果将使用btoa（）编码为base64，并以数据类型为前缀。产生的images数组中的每个元素可以设置为图像元素的src并显示。 
 
 
 
是的，您可以组装从块中的数据手动生成字符串，并使用 btoa将其转换为base64 （） JavaScript函数并预置数据类型信息。这是可以做到的：
  var imageData = []; //你的图像数据数组
 var blocksWide = 10; //画布数据宽度上的块数，例如。 Math.ceil（canvas.width / 66）
 var output =; // where base64字符串将被存储
 
 for（i = 0; i  
对于（k = 0; k  
 var row = imageData [i] .width * k; //在整个宽度上的当前字节行
 
 for（l = 0; l  
 = 0; m  
 var row2 = imageData [i + 1] .width * row ; 
 output + = String.fromCharCode（imageData [i + 1] .data [row2 + m]）; 
} 
} 
} 
} 
 
 output =data：image / png; base64，+ btoa 
 console.log（output）; 
  
可能需要稍微调整才能使其正常工作，通过计算跨越画布的宽度将需要的块的数目，然后遍历每个块的行来工作。对于每一行，它通过以正确的顺序组装数组的内容来组装每行图像数据。最后，它将结果字符串转换为base64，并在数据类型字符串前面。当然，人们会想知道为什么你不会在分割图像之前简单地调用toDataURL（）函数 （不需要这个），但是不管怎样，这是另一种方法。
 
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?
解决方案
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.

                        
这篇关于HTML5 Canvas将原始图片数据保存到数据网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！