2

I am using the canvas control. I use the image element to draw the image to the canvas on the image onload event.

I am looking to see if I can improve the performance by not loading into the image element first and directly locad the image to the canavs.

can this be done?

This is my current code:

desktopImage.src = "/Media/FrameHandler.ashx?camIndex=" + camIndex;

desktopImage.onload = function () {
    ctxLiveViews.drawImage(desktopImage, 0, 0);
}

I have been playing around with this code but the blob requires an ArrayBuffer:

var blob = new Blob('data:image/jpeg;base64,' + jpeg, { type: "image/jpeg" });
var url = (URL || webkitURL).createObjectURL(blob);
(URL || webkitURL).revokeObjectURL(url);

AMENDED CODE:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1/Media/FrameHandler.ashx?camIndex=' + camIndex, true);                     
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
    var uInt8Array = new Uint8ClampedArray(this.response);
    imageData[camIndex].data.set(uInt8Array);
    ctxLiveViews[camIndex].putImageData(imageData[camIndex], 0, 0);
};
xhr.send();

Generic Handler:

public void ProcessRequest(HttpContext context)
{
    context.Response.AddHeader("Access-Control-Allow-Origin", "*");
    context.Response.ContentType = "image/jpeg";
    var camIndex = Convert.ToInt16(context.Request.QueryString["camIndex"]);
    context.Response.BinaryWrite( Shared.Feeder[camIndex].JpegData);           
}

Image OutPut:

enter image description here

Andrew Simpson
  • 6,883
  • 11
  • 79
  • 179
  • Idk anyway of doing it but your `desktopImage` variable should be `var desktopImage = new Image()` and add the `onload` before you set the `desktop.src` – Edwin Reynoso May 09 '15 at 09:31
  • Like this: http://stackoverflow.com/a/15193645/4310091 – Edwin Reynoso May 09 '15 at 09:33
  • @Edwin, hi, thanks for that. It is declared as image elsewhere as it is a global variable – Andrew Simpson May 09 '15 at 10:29
  • I don't get it why don't you want to use the image element, you do realize you don't have to append it to the document right? – Edwin Reynoso May 09 '15 at 19:06
  • Edwin I wanted to see if I can remove a line of processing to quicken load image time. As I have found out the best thing to use IS the image control. I just needed to know of alternatives :) – Andrew Simpson May 09 '15 at 19:14

1 Answers1

1

Here is a method to directly load the image data to canvas, without considering the data is right be drew:

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
var imageData = ctx.getImageData(0, 0, 256, 256);

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://fiddle.jshell.net/img/logo.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
    var uInt8Array = new Uint8ClampedArray(this.response);
    imageData.data.set(uInt8Array);
    ctx.putImageData(imageData, 0, 0);
};

xhr.send();

jsfiddle

If you want to get the blob:

xhr.onload = function (e) {
    var uInt8Array = new Uint8Array(this.response);
    var blob = new Blob([ uInt8Array ], { type: "image/png" });
    var urlCreator = window.URL || window.webkitURL;
    var url = urlCreator.createObjectURL(blob);       
};
Yangguang
  • 1,785
  • 9
  • 10