如何从一个JPG的arrayBuffer表示创建一个canvas imageData数组 [英] How can I create a canvas imageData array from an arrayBuffer representation of a JPG
问题描述
首先我知道有标准的方法来实现这个(readAsDataURL和drawImage),但不幸的是它们不能用于这个特定的用例。
First of all I am aware there are standard methods of achieving this (readAsDataURL and drawImage), but unfortunately they are not usable for this specific use case.
I我使用filereader API作为数组缓冲器读取图像,如下所示:
I am reading an image using the filereader API as an arraybuffer like so:
var reader = new fileReader();
reader.onload = function(e){
var byteArray = new Uint8ClampedArray(e.target.result);
//do stuff to this array
}
reader.readAsArrayBuffer(file);
然后我用这个返回的数据创建一个clamparray。
I am then creating a clampedarray with this returned data.
我想要做的是使用 putImageData
目前我正在做以下事情:
Currently I am doing the following:
var byteArray = new Uint8ClampedArray(e.target.result);
var imgdata = ctx.createImageData(img.width, img.height);
var canvdata = imgdata.data;
for (var i = 0; i < canvdata.length; i += 4) {
canvdata[i] = byteArray[i];
canvdata[i + 1] = byteArray[i + 1];
canvdata[i + 2] = byteArray[i + 2];
canvdata[i + 3] = byteArray[i + 3];
}
ctx.putImageData(imgdata, 0, 0);
使用这种方法,虽然数据会被绘制到画布上,但是它看起来像是雪花或噪音,不是图像的正确表示。
Using this method, although the data gets drawn to the canvas, it appears like garbled snow or noise and is not a correct representation of the image.
这让我相信我在我的循环中错误地构造了图像数据,或者我的初始方法获得像素阵列是不正确的。
This leads me to believe that I am constructing the imagedata data incorrectly in my loop or perhaps my initial method of getting the pixel array is incorrect.
总而言之,我想能够通过html5 fileReader API获取一个arraybuffer(一个jpeg),然后创建一个canvas兼容的imageData数组,以便以后可以使用 putImageData
To summarize, I would like to be able to take an arraybuffer (of a jpeg) retrieved via the html5 fileReader API and then create a canvas compatible imageData array, so that it can later be pushed into a canvas using putImageData
提前感谢。
推荐答案
编辑
em>文件不是一个简单的字节数组的颜色数据,因此你不能简单地加载它像这样。如果您想避开直接导入到画布中,您必须使用 JPEG 解码库,例如
A JPEG file isn't a simple byte-array of colour data, and therefore you can't simply load it in like this. If you want to get around this without importing directly into a canvas you'll have to use a JPEG decoding library, such as this project by notmasteryet which I found via a quick google search.
原始 p>
Original
很遗憾,它们不适用于此特定用例
unfortunately they are not usable for this specific use case
为什么它们不可用?
// example array
u = new Uint8ClampedArray(4);
u[0] = 255, u[1] = 56, u[2] = 201, u[3] = 8; // [255, 56, 201, 8]
// to String
str = String.fromCharCode.apply(null, u); // "ÿ8É"
// to Base64
b64 = btoa(str); // "/zjJCA=="
// to DataURI
uri = 'data:image/jpeg;base64,' + b64; // "data:image/jpeg;base64,/zjJCA=="
p>
And the reverse
// uri to Base64
b64 = uri.slice(uri.indexOf(',')+1);
// to String
str = atob(b64);
// to Array
arr = str.split('').map(function (e) {return e.charCodeAt(0);});
// to Uint8ClampedArray
u = new Uint8ClampedArray(arr); // [255, 56, 201, 8]
这篇关于如何从一个JPG的arrayBuffer表示创建一个canvas imageData数组的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!