就像标题所说,我有一个表示图像内容的字节数组(可以是jpeg或png).
我想在常规画布对象上绘制它
我怎样才能做到这一点?
更新我试过这个(不成功):( imgData是一个png作为字节数组"按原样"通过WebSockify发送给客户端)
function draw(imgData) { "use strict"; var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var rdr = new FileReader(); var imgBlob = new Blob([imgData], {type: "image/png"}); rdr.readAsBinaryString(imgBlob); rdr.onload = function (data) { console.log("Filereader success"); var img = new Image(); img.onload = function () { console.log("Image Onload"); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; img.onerror = function (stuff) { console.log("Img Onerror:", stuff); }; img.src = "data:image/png;base64," + window.btoa(rdr.result); }; }
我总能到达 img.onerror()
此外,在我的文件系统上使用HEX编辑器读取文件后,我可以看到字节数组与原始文件相同.
这个作品:
function draw2(imgData, coords) { "use strict"; var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //var uInt8Array = new Uint8Array(imgData); var uInt8Array = imgData; var i = uInt8Array.length; var binaryString = [i]; while (i--) { binaryString[i] = String.fromCharCode(uInt8Array[i]); } var data = binaryString.join(''); var base64 = window.btoa(data); var img = new Image(); img.src = "data:image/png;base64," + base64; img.onload = function () { console.log("Image Onload"); ctx.drawImage(img, coords[0], coords[1], canvas.width, canvas.height); }; img.onerror = function (stuff) { console.log("Img Onerror:", stuff); }; }