javascript - 在没有 Canvas 的情况下将字节数组转换为图像数据

Question

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

我目前使用类似这样的东西，但我认为没有 Canvas 也可以做到，或者我错了吗？

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

将问题从问题中分离出来

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...

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)

我想您可以将适合该界面的数据装箱并尝试一下。

如果你尝试了，请告诉我结果如何:)

或者，您可以创建所需宽度/高度的内存 Canvas --document.createElement("canvas")，然后获取其图像数据并插入您自己的数组。我知道这行得通。是的......这与你的问题相反，但你没有将 Canvas 添加到你的页面。