我正在尝试渲染存储在 javascript 中的 PNG 图像
Uint8Array
。我最初尝试的代码如下:
var imgByteStr = String.fromCharCode.apply(null, this.imgBytes);
var pageImg = new Image();
pageImg.onload = function(e) {
// Draw onto the canvas
canvasContext.drawImage(pageImg, 0, 0);
};
// Attempt to generate the Data URI from the binary
// 3rd-party library adds toBase64() as a string function
pageImg.src="data:image/png;base64,"+encodeURIComponent(imgByteStr.toBase64());
但是,我发现由于某种原因,onload 函数从未运行(我在 chrome 中设置了断点,但它根本没有命中)。我发现如果我将 src 设置为 URL 而不是 Data URI,它就能正常工作。然而,由于一些限制,我无法直接引用图像的 URL,即它必须从
UInt8Array
加载。
此外,让事情变得更复杂的是,这些图像的大小可能有兆字节。据我所知,尝试对非常大的图像使用数据 URI 存在兼容性问题。因此,我非常犹豫是否要使用它们。
因此,问题是如何在不使用数据 URI 或直接引用图像 URL 的情况下将此字节数组作为 PNG 渲染到画布上下文上?
我还尝试使用类似以下内容的方法直接使用
putImageData
函数操作图像数据。请记住,我并不 100% 理解这个函数是如何工作的
var imgdata = canvasContext.createImageData(this.baseHeight, this.baseWidth);
var imgdatalen = imgdata.data.length;
for(var i=0; i<imgdatalen; i++) {
imgdata.data[i] = _this.imgBytes[i];
}
canvasContext.putImageData(imgdata, 0, 0);
它是从一个博客中提取的,我已经关闭了该博客的标签,所以对没有给予适当的认可的灵感表示歉意。
另外,当我慢慢地研究这个东西时,我在 Chrome 中遇到了一个错误
SECURITY_ERR: DOM Exception 18
。事实证明,一旦使用 drawImage 将图像加载到画布中,如果没有一些额外的解决方法,就无法检索它。关于该主题的Chromium 博客文章特别有用
如果你已经有一个 UInt8Array,你应该考虑使用
Blob
和 createObjectURL
; createObjectURL
分配一个特殊的 URL,允许浏览器访问内部创建的二进制数据 blob,就像是从外部加载的文件一样。
createObjectURL
是大数据 URI 的绝佳替代方案。您可能仍然需要在 Opera、IE 中使用数据 URI<10, and all but the most recent versions of mobile browsers.
var myArray; //= your data in a UInt8Array
var blob = new Blob([myArray], {'type': 'image/png'});
var url = URL.createObjectURL(blob); //possibly `webkitURL` or another vendor prefix for old browsers.
如果内存中有 PNG 数据(我认为这就是您所描述的),那么您可以从中创建图像。在 HTML 中,它看起来像:
<img src="data:image/png;base64,KSjs9JdldhAlisflAkshf==" />
在 JavaScript 中你也可以做同样的事情:
var image = document.createElement('img');
image.src = 'data:image/png;base64,' + base64Data;
请注意,如果您没有 PNG 数据,可以更改 MIME 类型。
然后您可以使用
image
或类似工具将 context.drawImage(image, 0, 0)
绘制到画布上。
所以难题的剩余部分是将
Uint8Array
的内容编码为 Base 64 数据。
var array = new Uint8Array(),
base64Data = btoa(String.fromCharCode.apply(null, array));
功能
btoa
不是标准功能,因此某些浏览器可能不支持它。然而,似乎大多数都是这样。否则你可能会发现我使用的一些代码很有帮助。
我自己还没有测试过这些!
完整工作示例:(另存为 .html 文件并打开)
1:创建 Uint8Array。
2:用调试模式填充它。
3:粘贴到页面的canvas元素中。
输出应如下所示:
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title> U8A_TO_CANVAS </title>
<meta name ="author"
content="John Mark Isaac Madison">
<!-- EMAIL: [email protected] -->
</head>
<body>
<canvas id="CANVAS_ID"
width ="512"
height="512">
</canvas>
<script>
和JavaScript
var com = 4 ; //:4 components( RGBA )
var wid = 512;
var hig = 512;
var tot_com = wid*hig*com;//:total#components
var u8a = new Uint8Array( tot_com );
DrawDebugPattern ( u8a , wid, hig );
Uint8ArrayToCanvas( u8a , wid, hig, "CANVAS_ID" );
function Uint8ArrayToCanvas(
u8a, //:uint8Array
wid, //:width__of_u8a_data_in_pixels
hig, //:height_of_u8a_data_in_pixels
nam, //:name_id_of_canvas_on_dom
){
//:Get Canvas:
var can = document.getElementById( nam );
if(!can){ throw "[FailedToGetCanvas]"; }
//:Get Canvas's 2D Context:
var ctx = can.getContext("2d");
if(!ctx){ throw "[FailedToGetContext]"; }
//:Use U8A to create image data object:
var UAC = new Uint8ClampedArray( u8a,wid,hig);
var DAT = new ImageData(UAC, wid, hig);
//:Paste Data Into Canvas:
var ORG_X = 0;
var ORG_Y = 0;
ctx.putImageData( DAT, ORG_X, ORG_Y );
}
function DrawDebugPattern(u8a,wid,hig){
var com = 4 ; //:RGBA==4components.
var tot_pix = wid*hig;//:total#pixels
//:Calculate point in center of canvas:
var cen_x = wid/2;
var cen_y = hig/2;
//:Define a circle's radius:
var rad_c = Math.min(wid,hig) / 2;
//:Make a pattern on array:
var d = 0; //:d_is_for_distance
var ci = 0; //:Component_Index
var pi = 0; //:Pixel_Index
var px = 0; //:Pixel_X_Coord
var py = 0; //:Pixel_Y_Coord
for( pi = 0; pi < tot_pix; pi++ ){
//:Calculate index of first component
//:of current pixel:
ci = pi * com;
//:Index_To_XY_Formula:
px = pi % wid ;
py = (pi-px)/ wid ;
//:Decide if pixel is inside circle:
var dx = (cen_x-px); //:delta_x
var dy = (cen_y-py); //:delta_y
d=Math.sqrt( (dx*dx)+(dy*dy) );
if( d < rad_c ){
//:INSIDE_CIRCLE:
u8a[ ci + 0 ] = 0 ; //:Red
u8a[ ci + 1 ] = 255; //:Green
u8a[ ci + 2 ] = 0 ; //:Blue
u8a[ ci + 3 ] = 255; //:Alpha
}else{
//:OUTSIDE_CIRCLE:
u8a[ ci + 0 ] = 0 ; //:Red
u8a[ ci + 1 ] = 0 ; //:Green
u8a[ ci + 2 ] = 64 ; //:Blue
u8a[ ci + 3 ] = 255; //:Alpha
}
}
}
</script>
</body>
<!-- In IE: Script cannot be outside of body. -->
</html>