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

【问题标题】：Convert a byte array to image data without canvas将字节数组转换为没有画布的图像数据
【发布时间】：2013-04-14 18:46:18
【问题描述】：

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

我目前使用这样的东西，但是我认为可以在没有画布的情况下完成，还是我错了？

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 对于这个用例来说似乎有点过于臃肿......

【问题讨论】：

我认为唯一的其他方法是通过服务器。
您可能会将图像数据转换为 base64。例如
@LeeTaylor Yeh，我已经知道 base64-URI，但不知道如何将字节数组转换为图像数据就绪的 b64 代码。
@LeeTaylor 查看我的更新...
你可以试试this，但我怀疑使用画布应该会更好。

标签： javascript canvas base64 bytearray getimagedata

【解决方案1】：

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

【讨论】：

画布本身并不是真正的问题，而是 oldIE（和其他）不支持它的事实。 ...对于这个用例来说，像 excanvas 或 flashcanvas 这样的库似乎有点臃肿......

【解决方案2】：

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 接口的想法，但还没有尝试过。我不相信这会奏效，但请给我一些时间，我会尝试一下。 :)
更新：不！可悲的是，重建界面不起作用:(
我担心它行不通。我怀疑 CORS“脏”标志隐藏在某处的 imagedata 对象中。另一方面，您可以只创建内存中的画布，您就可以了！ ;)
是的，看起来是这样 ;( 但是因为我讨厌用上下文 no 回答，所以我会玩一下 base64 编码。
把 Canvas 想象成一个用于网络的高级超级强大的图像类。真的没那么糟糕。