javascript - Draw jpeg array directly onto a Canvas -

at moment byte array of jpeg signalr connection , load image , on image.onload event draw image canvas.

so:

desktopimage.onload = function () {     mycanvascontext.drawimage(desktopimage, 0, 0); }  chat.client.broadcastmessage = function (jpeg) {     desktopimage.src = 'data:image/jpeg;base64,' + jpeg; } 

which work well.

i wondering whether 'quicken' process drawing image directly onto canvas without 1st loading image 1st.

is possible?

if receive byte array state, assuming arraybuffer, wrap blob object , create object url instead. save significant overhead encoding , decoding base-64:

example:

var desktopimage = new image(); var url;  desktopimage.onload = function () {     mycanvascontext.drawimage(desktopimage, 0, 0);     (url || webkiturl).revokeobjecturl(url);  // release memory }  // assuming jpeg = arraybuffer: chat.client.broadcastmessage = function (jpeg) {     var blob = new blob([jpeg], {type: "image/jpeg"});     url = (url || webkiturl).createobjecturl(blob);      desktopimage.src = url; }