I have the following code:

function resizeBase64Img(base64, coeficient) {

var sizeGetter = new Image();

sizeGetter.src = base64;

var height = sizeGetter.height*coeficient;

var width = sizeGetter.width*coeficient;

var canvas = document.createElement("canvas");

canvas.width = width;

canvas.height = height;

var context = canvas.getContext("2d");

var deferred = $.Deferred();

$("").attr("src", base64).load(function() {

context.scale(width/this.width, height/this.height);

context.drawImage(this, 0, 0);

deferred.resolve($("").attr("src", canvas.toDataURL()));

});

return deferred.promise();

}

Basically what it does is it grabs an image from an input[type=file] and then uses canvas to resize the image before appending it to the body. This works fine on Chrome in OSX.

In Mobile Safari (iOS 8.1) the appended image has an empty src * sometimes *, some images so work, but most fail. I tried also using the desktop safari to troubleshoot, and it simply stops working when it gets to the canvas related instructions. I've looked around for known bugs, but the only thing I could find was this, although I don't seem to breaking the rules stated there.

Is this just simply poor canvas support on iOS8? Have I missed something?

EDIT #1:

Apparently there's also another issue, which I'll be looking at. (Stackoverflow won't let me post the link)

EDIT #2:

The error seems to be this:

var canvas = document.createElement("canvas");

canvas.width = width;

canvas.height = height;

Canvas is not setting its width and height properly. They remain as undefined as per the inspector in Mobile Safari.