Canvas.toDataUrl () returns data :, '

Question

I am trying to resize an image and return a base64 string representation using canvas.toDataUrl ().

My code is as follows (see below). My problem is that every time I start it over again, it returns "data:".

Then, when I repeat the re-determination of the size (the call using the button), it works fine and returns me a non-empty base64 string. What's happening?

function drawAndResizeFunction(images) var qDraw = $q.defer(); // 1 drawCanvasWrapper().then(function(canvasData){ qDraw.resolve(canvasData) }); // 2 function drawCanvasWrapper() { var pResults = images.map(function (imageObj) { //return drawCanvassIter(imageObj.tempURL); // tempUrl return resizeIter(imageObj.tempURL).then(function(result){ console.log("resized", result) // *** RETURNS data:, in first attempt return result; }) }); return $q.all(pResults); }; // 3inval // returns canvasdata function resizeIter(nativeURL) { console.log("resizeIter") var qResize = $q.defer(); var canvas = document.getElementById("resizecanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.src = nativeURL; var newScales = resizeDimensions(img.width, img.height) var iw =canvas.width =img.width =newScales.iw; var ih =canvas.height =img.height =newScales.ih; img.onload = function () { // --> 4 ctx.drawImage(img, 0, 0, iw, ih); $timeout(function(){ qResize.resolve(canvas.toDataURL("image/jpeg")); }, 200) }; return qResize.promise; // // function resizeDimensions(iw, ih) { var scaleFactor = 1; var targetSize = 800; if (iw > targetSize || ih > targetSize) { if(iw > ih) { scaleFactor = targetSize/iw; } else { scaleFactor = targetSize/ih; } } var iwAdj = Math.floor(iw*scaleFactor); var ihAdj = Math.floor(ih*scaleFactor); return { ih: ihAdj, iw: iwAdj } }; }; return qDraw.promise; }; // done 

Answer 1

Cause

The reason is that the canvas is not a valid size :

[...] The only exception: if the canvas has no height or no width, in which case the result may simply be "data:".

Invalid size includes anything <1.

When an image element has no loaded data, the width and height properties are 0 by default until the image is fully loaded and decoded into a bitmap, and the onload handler is launched at this time:

 var img = new Image(); document.write("w: " + img.width + " h: " + img.height); 

Decision

Make sure the image has loaded before reading any size (simplified example, accept, as you can see, for your code):

 var img = new Image(); var w, h; img.onload = function() { w = this.width; // here we can extract image size h = this.height; // set canvas size here as well before drawing the image in // continue you code from here using f.ex. a callback document.write("w: " + w + " h: " + h); }; img.src = "http://i.imgur.com/eekEotAb.jpg"; // set src last 

Answer 2

The image is not yet fully loaded when you call resizeDimensions . And you are trying to resize the canvas before the img sizes are set.

Put this code inside the img.onload handler img.onload that the image is fully loaded.