Question

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

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

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/

更新

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

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

更新2

将问题与问题分开

画布本身不是，而是事实 oldIE（以及其他人）不支持它。 ......还有像excanvas或者那样的图书馆对于这个用例，flashcanvas看起来有点过于膨胀......

Answer 1

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

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

（参见规格：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#imagedata）

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

如果您尝试，请告诉我结果如何：）

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

Answer 2

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

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

2 个答案: