how to draw a imageUrl in Canvas? - javascript

I am using html5 canvas with SignalR.
I got the canvas Url By this,
var refreshCanvas = canvasParent.toDataURL();
whiteBoard.server.refreshCanvas(refreshCanvas);
I am getting data on client-side also, as a url string by:
whiteBoard.client.refreshCanvas = function (refreshCanvas){
//alert(refreshCanvas);
var img = new Image;
img.onload = function () {
contextParent.drawImage(img, 0, 0);
};
img.src = refreshCanvas;
}
I have checked that imagedata Url is coming as string but my problem is how to draw that imageUrl data onto my canvas.
my canvas name is "canvasParent" and context name is "contextParent".
I am getting image Url As :
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABOIAAAIDCAYAAACpTrFbAAAgAElEQVR4Xu3YMQ0AAAgEMfBvGhXcVAx80jDdjiNAgAABAgQIECBAgAABAgQIECBA4F1g3xcMECBAgAABAgQIECBAgAABAgQIECAwQpwnIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBKVZdR4AABBjSURBVAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAICHEBsgkCBAgQIECAAAECBAgQIECAAAECQpwfIECAAAECBAgQIECAAAECBAgQIBAIHNVNAgShTDHtAAAAAElFTkSuQmCC

Related

FileReader dragging image from browser window

I have a div where users can drag and drop an image and then, using FileReader, I get the base64 of the image. Works fine.
dropper.ondrop = function (e) {
e.preventDefault();
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
};
My issue is if I have a browser window open and drag and drop an image from the browser I get the error:
Failed to execute 'readAsDataURL' on 'FileReader':
parameter 1 is not of type 'Blob'.
Now, is there any turnaround to get the base64 of an image dragged from the browser window?
Ultimately, is there is a way to get the image URL and then the actual base64 with a server side curl request?
Any idea?
You can use e.dataTransfer.getData('url') to tell whether there's a URL available. Like this:
var url = e.dataTransfer.getData('url');
if(url){
console.log('Url');
console.log(url);
}else{
console.log('File');
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
}
Then, having the URL, you can load an img element and use draw it on a canvas to grab the base64 representation. Like this:
var img = document.createElement('img');
img.crossOrigin = 'anonymous';
img.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0);
console.log(canvas.toDataURL());
};
img.src = url;
This would be the "final" product:
var dropper = document.querySelector('div');
dropper.ondragover = function(e) {
e.preventDefault();
}
dropper.ondrop = function (e) {
e.preventDefault();
var url = e.dataTransfer.getData('url');
if(url){
console.log('Url');
console.log(url);
var img = document.createElement('img');
img.crossOrigin = 'anonymous';
img.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0);
console.log(canvas.toDataURL());
};
img.src = url;
}else{
console.log('File');
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
}
};
div{
border:1px solid red;
height:240px;
width:100%;
}
<div>Drop here</div>
Also available here: https://jsfiddle.net/8u6Lprrb/1/
The first parameter comes through with the "http://" or "https://" protocol instead of the expected "file://" protocol. and thats why you cant read it with the HTML5 FILE API, so you may want to download and save the file first before trying to read the contents.
on the other hand, you can update an img tag's src attribute with the retrieved url and skip the readDataAsUrl() portion to hotlink the image.

Execute Function After Canvas toDataURL() Function is Complete

I'm converting images to base64 using canvas. What i need to do is convert those images and then show the result to the user (original image and base64 version). Everything works as expected with small images, but when i try to convert large images (>3MB) and the conversion time increases, the base64 version is empty.
This might be is caused because the result is shown before the toDataURL() function is completed.
I need to show the result after all the needed processing has ended, for testing purposes.
Here's my code:
var convertToBase64 = function(url, callback)
{
var image = new Image();
image.onload = function ()
{
//create canvas and draw image...
var imageData = canvas.toDataURL('image/png');
callback(imageData);
};
image.src = url;
};
convertToBase64('img/circle.png', function(imageData)
{
window.open(imageData);
});
Even though i'm using image.onload() with a callback, i'm unable to show the result after the toDataURL() has been processed.
What am i doing wrong?
UPDATE: I tried both the solutions below and they didn't work. I'm using AngularJS and Electron in this project. Any way i can force the code to be synchronous? Or maybe some solution using Promises?
UPDATE #2: #Kaiido pointed out that toDataURL() is in fact synchronous and this issue is more likely due to maximum URI length. Since i'm using Electron and the image preview was for testing purposes only, i'm going to save the file in a folder and analise it from there.
Your code seems absolutely fine. Not sure why isn't working you. Maybe, there are some issues with your browser. Perhaps try using a different one. Also you could use a custom event, which gets triggered when the image conversion is competed.
// using jQuery for custom event
function convertToBase64(url) {
var image = new Image();
image.src = url;
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);
var imageData = canvas.toDataURL();
$(document).trigger('conversionCompleted', imageData);
};
};
convertToBase64('4mb.jpg');
$(document).on('conversionCompleted', function(e, d) {
window.open(d);
});
This approach might work for you. It shows the image onscreen using the native html element, then draws it to a canvas, then converts the canvas to Base64, then clears the canvas and draws the converted image onto the canvas. You can then scroll between the top image (original) and the bottom image (converted). I tried it on large images and it takes a second or two for the second image to draw but it seems to work...
Html is here:
<img id="imageID">
<canvas id="myCanvas" style="width:400;height:400;">
</canvas>
Script is here:
var ctx;
function convertToBase64(url, callback)
{
var image = document.getElementById("imageID");
image.onload = function() {
var canvas = document.getElementById("myCanvas");
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
ctx = canvas.getContext("2d");
ctx.drawImage(image,0,0);
var imageData = canvas.toDataURL('image/png');
ctx.fillStyle ="#FFFFFF";
ctx.fillRect(0,0,canvas.width,canvas.height);
callback(imageData);
};
image.src = url;
};
var imagename = 'images/bigfiletest.jpg';
window.onload = function () {
convertToBase64(imagename, function(imageData) {
var myImage = new Image();
myImage.src = imageData;
ctx.drawImage(myImage,0,0);
});
}
Note that I also tried it without the callback and it worked fine as well...

javascript- unable to convert canvas to image data

guys!
I'm trying to make a demo using which a user will be able to capture an image from the web camera enabled through his browser and this image will be saved in the backend by passing it to a PHP service using AJAX call.
I'm able to capture as canvas but not being to convert it into image data.
I'm getting canvas is undefined error
Setup is pretty simple.
HTML
<video id="videoElement" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" style="display:none" ></canvas>
JAVASCRIPT
// Grab elements, create settings, etc.
var video = document.getElementById('videoElement');
// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Not adding `{ audio: true }` since we only want video now
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('videoElement');
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
var cann= context.drawImage(video, 0, 0, 640, 480); //draw canvas
//then convert canvas to image so i can obtain dataurl
//and pass it to another function using AJAX
var img= convertCanvasToImage(cann);
console.log(img);
});
// Converts canvas to an image
function convertCanvasToImage(canvas)
{
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
I'm pretty new to this field. I have one more question. Will this work on latest browsers?
Can anyone help me figure out the mistake I made?
FIDDLE
Reference:
https://davidwalsh.name/browser-camera
https://davidwalsh.name/convert-canvas-image
Just call this
var img= convertCanvasToImage();
function convertCanvasToImage()
{
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
No need to pass canvas as you defined canvas above. But if you have convertCanvasToImage function in another file then you can use
var img= convertCanvasToImage(canvas);
This may help.
function demoFromHTML() {
html2canvas(document.getElementById("talltweets"), {
onrendered: function(canvas) {
var imageData = canvas.toDataURL('image/png',1.0);
}
});
}
Pass canvas object instead of cann
var img= convertCanvasToImage(canvas);
If you can try to avoid dataURL and use blob instead - it will save you more memory and load images faster
$canvas.toBlob(function(blob){
var url = URL.createObjectURL(blob)
var img = new Image
img.onload = function() {
URL.revokeObjecURL(this.src)
}
img.src = url
console.log(blob)
console.log(url)
})
<canvas id="$canvas">
there is polyfills you can use to support canvas#toBlob

Trying to display image in an HTML5 canvas

I've tried all code variations that are online. I just want to display an image on a canvas. I've tried code from this site.
window.onLoad=function(){
function draw(){
var ctx = document.getElementById("canvas1").getContext("2d");
var img = new Image();
img.src = 'images/ball.png';
img.onload = function(){
ctx.drawImage(img,0,0);
};
};
};
It's not the file path that's a problem, that has been tested without the images folder. There are no errors in the console. Thanks.
One search in google and there you go with complete jsfiddle example:
// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function () {
ctx.drawImage(img, 0, 0);
}
// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";
http://jsfiddle.net/jimrhoskins/Sv87G/

Display Image using canvas in JavaScript/jQuery

I have the following code :
function createImage(source) {
var pastedImage = new Image();
pastedImage.onload = function() {
document.write('<br><br><br>Image: <img src="'+pastedImage.src+'" height="700" width="700"/>');
}
pastedImage.src = source;
}
Here I am displaying the image through html image tag which I wrote in document.write and provide appropriate height and width to image.
My question is can it possible to displaying image into the canvas instead of html img tag? So that I can drag and crop that image as I want?
But how can I display it in canvas?
Further I want to implement save that image using PHP but for now let me know about previous issue.
Try This
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image(); // Create new img element
img.onload = function(){
// execute drawImage statements here This is essential as it waits till image is loaded before drawing it.
ctx.drawImage(img , 0, 0);
};
img.src = 'myImage.png'; // Set source path
Make sure the image is hosted in same domain as your site. Read this for Javascript Security Restrictions Same Origin Policy.
E.g. If your site is http://example.com/
then the Image should be hosted on http://example.com/../myImage.png
if you try http://facebook.com/..image/ or something then it will throw security error.
Use
CanvasRenderingContext2D.drawImage.
function createImage(source) {
var ctx = document.getElementById('canvas').getContext('2d');
var pastedImage = new Image();
pastedImage.onload = function(){
ctx.drawImage(pastedImage, 0, 0);
};
pastedImage = source;
}
Also MDN seems to be have nice examples.

Categories