如何从一个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屋！