转换一个字节数组图像数据而不画布(Convert a byte array to image dat

2019-08-31 17:38发布

是它在某种程度上可能转​​换的字节数组图像数据,而不使用印刷品吗?

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

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/

更新

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

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

更新2

从问题分割问题

画布本身又何尝不是,而是一个事实,即过时的歌曲(和其他人)不支持它。 ......而像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(“画布”),然后抓住它的图象-和插入自己的阵列。 我知道这工作。 是的......是去违背了你的问题,但你不增加画布到您的网页。



Answer 2:

你有什么不想用帆布理由吗? 这到底是怎样的画布是。 一旦你的图像数据,你会怎么做呢? 呈现在浏览器? 发送到服务器? 下载到用户? 如果问题仅仅是你不希望有屏幕上,你可以创建一个隐藏的帆布做的工作的画布。



文章来源: Convert a byte array to image data without canvas