将字节数组转换为没有画布的图像数据

Is it somehow possible to convert an byte array to image data without using canvas?

是否可以在不使用画布的情况下将字节数组转换为图像数据?

I use currently something like this, however I think that can be done without canvas, or am I wrong?

我目前使用的是这样的东西,但我认为没有画布可以做到,或者我错了?

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");

var byteArray = [ 
    255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, // red
    0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, // green
    0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255 // blue
];

var imageData = ctx.getImageData(0, 0, 10, 3);
for(var i = 0; i < byteArray.length; i+=4){
    imageData.data[i] = byteArray[i];
    imageData.data[i+1] = byteArray[i + 1];
    imageData.data[i+2] = byteArray[i + 2];
    imageData.data[i+3] = byteArray[i + 3];
}

ctx.putImageData(imageData, 0, 0);

http://jsfiddle.net/ARTsinn/swnqS/

Update

I've already tried to convert it into an base64-uri but no success:

我已经尝试将其转换为base64-uri但没有成功:

'data:image/png;base64,' + btoa(String.fromCharCode.apply(this, byteArray));

'data:image / png; base64,'+ btoa(String.fromCharCode.apply(this,byteArray));

Update 2

To split the question from the problem

将问题从问题中分离出来

The canvas itself is it not, rather the fact that oldIE (and else) don't support it. ...And libraries like excanvas or flashcanvas seems a bit too bloated for this use case...

画布本身不是,而是oldIE(以及其他)不支持它的事实。 ...像excanvas或flashcanvas这样的库对于这个用例似乎有点过于膨胀......

2 个解决方案

#1

canvas.getImageData returns an ImageData object that looks like this:

canvas.getImageData返回一个如下所示的ImageData对象:

interface ImageData {
  readonly attribute unsigned long width;
  readonly attribute unsigned long height;
  readonly attribute Uint8ClampedArray data;
};

(See the specs: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#imagedata)

(参见规范:http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#imagedata)

I guess you could box your data fitting that interface and try it out.

我猜你可以把你的数据打包到那个接口并尝试一下。

If you try, let me know how it turns out :)

如果你试试,让我知道它是怎么回事:)

Alternatively, you could create an in-memory canvas of your desired width/height--document.createElement("canvas"), Then grab its imagedata and plug in your own array. I know this works. Yes...that goes contrary to your question, but you're not adding the canvas to your page.

或者,您可以创建所需宽度/高度的内存中画布 - document.createElement(“canvas”),然后抓取其imagedata并插入您自己的数组。我知道这很有效。是的...这与您的问题相反,但您没有将画布添加到您的页面。

#2

Is there a reason you don't want to use canvas? This really is what canvas is for. Once you have the image data what would you do with it? Render it in the browser? Send to a server? Download to the user? If the problem is just that you don't want to have a canvas on screen you could create a hidden canvas to do the work.

有没有理由你不想使用帆布?这真的是画布的用途。获得图像数据后,您会用它做什么?在浏览器中渲染它?发送到服务器?下载给用户?如果问题只是你不想在屏幕上有画布,你可以创建一个隐藏的画布来完成工作。

#1