转换一个字节数组图像数据而不帆布 [英] Convert a byte array to image data without canvas

问题描述

是它在某种程度上可能转​​换的字节数组图像数据，而无需使用帆布？

我目前使用这样的事情，但是我认为，可以在不帆布做的，还是我错了？

  VAR帆布= document.getElementsByTagName（帆布）[0];
变种CTX = canvas.getContext（2D）;VAR的字节数组= [
    255，0，0，255，255，0，0，255，255，0，0，255，//红
    0，255，0，255，0，255，0，255，0，255，0，255，//绿色
    0，0，255，255，0，0，255，255，0，0，255，255 //蓝色
];变种的imageData = ctx.getImageData（0，0，10，3）;
对于（VAR I = 0; I＆LT; byteArray.length; I + = 4）{
    imageData.data [I] =的字节数组[我]
    imageData.data第[i + 1] =的字节数组第[i + 1];
    imageData.data第[i + 2] =的字节数组第[i + 2];
    imageData.data第[i + 3] =的字节数组第[i + 3];
}ctx.putImageData（的imageData，0，0）;
 

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

更新

我已经尝试过将其转换成一个基于64位的URI，但没有成功：

数据：图像/ PNG; BASE64，'+ BTOA（String.fromChar code.apply（此，字节））;

更新2

要从这个问题分裂的问题。

  

画布本身又何尝不是，而事实上，
  过时的歌曲（和其他人）不支持它。 ...和图书馆像excanvas或
  flashcanvas似乎有点过于臃肿对于这种使用情况...

解决方案

canvas.getImageData 返回一个对象的ImageData看起来像这样的：

 接口的ImageData {
  只读属性无符号长宽度;
  只读属性无符号长个儿;
  只读属性Uint8ClampedArray数据;
};
 

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

我猜你会打你的数据拟合该接口，并尝试一下。

如果你尝试，让我知道结果如何：）

另外，你可以创建一个内存帆布所需的宽度/高度 - 使用document.createElement（画布上），然后抓住它的imageData，并插入自己的阵列。我知道这工作。是的...那去违背了你的问题，但你不增加画布到您的网页。

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:

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

解决方案

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

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)

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.

这篇关于转换一个字节数组图像数据而不帆布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！