将字节数组转换为图像数据而不使用画布

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);

点击此处可查看相关IT技术内容。

更新

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

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

更新2

问题实际上不在于canvas本身，而在于旧版IE(以及其他浏览器)不支持它。......对于这种情况，excanvas或flashcanvas等库似乎有点过于臃肿。

- yckart

---

我认为唯一的另一种方法是通过服务器进行。 - Ted Hopp

你可以将图像数据转换为base64格式。例如：<img src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPbWLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVrApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KTkpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=" alt="British Blog Directory" width="80" height="15" /> - Lee Taylor

@LeeTaylor，是的，我已经知道base64-URIs了，但不知道如何将字节数组转换为准备好的图像数据b64代码。 - yckart

你可以尝试类似于这样的方法，但我怀疑使用画布会更好。 - bfavaretto

在你的更新中：但是旧版IE也不支持数据URI。那么，你想通过这个实现什么？ - bfavaretto

@bfavaretto 我只需要支持ie8+，正如我们所知，ie8将数据URI限制在最大长度为32 KB（ie9没有此限制）。因此，我认为这不是一个问题。 - yckart

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并插入你自己的数组。我知道这个行得通。是的...这与你的问题相反，但你不需要在页面上添加画布。

- markE

---

是的，我已经想过重建ImageData接口了，但还没有尝试过。我不相信这会起作用，但给我几分钟，我会试一下。 :) - yckart

更新：不！重建界面不起作用，很遗憾 :( - yckart

我曾经担心它不会起作用。我怀疑CORS的“脏”标志在imagedata对象中某个地方隐藏着。另一方面，你可以创建一个内存画布，这样就万事大吉了！;) - markE

是的，看起来是这样的 ;( 但是由于我不喜欢用上下文回答“不”，所以我会尝试一下 base64 编码。 - yckart

只需将Canvas视为Web的高级超强图像类即可。它真的不那么糟糕。 - Jack Franzen

Answer 2

你不想使用画布(canvas)的原因是什么？这正是画布(canvas)存在的意义。一旦你获得了图像数据，你会怎样处理它呢？在浏览器中渲染？发送到服务器？下载给用户？如果问题只是你不想在屏幕上显示画布(canvas)，你可以创建一个隐藏的画布(canvas)来完成工作。

- Josh Marinacci

---

画布本身并不是真正的问题，而是因为旧版IE（和其他浏览器）不支持它。而像excanvas或flashcanvas这样的库似乎对于这种用例来说有点太臃肿了。 - yckart