I need some assistance. We seem to be having an issue with iOS with regards to getting the base64 of an image via HTML 5 / Canvas. Everything works fine if we use the default height / width of the canvas or hard code the height and width. However if we set the canvas height / width to that of the image src then the image won’t load into the canvas and therefore we won’t get the image as base64.

Code snippet which works:

function convertImageToBase64(imgUrl, callback) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    // load image from data url
    var imageObj= new Image();
    imageObj.onload = function () {
        var dataUrl;
        context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

        dataUrl = canvas.toDataURL("image/png");
        callback.call(this, dataUrl);
        canvas = null;
    };
    imageObj.src = imgUrl;
}

Code snippet which does not work on iOS but does work on Android:

function convertImageToBase64(imgUrl, callback) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    // load image from data url
    var imageObj= new Image();
    imageObj.onload = function () {
        var dataUrl;
        canvas.width = imageObj.width;
        canvas.height = imageObj.height;
        context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

        dataUrl = canvas.toDataURL("image/png");
        callback.call(this, dataUrl);
        canvas = null;
    };
    imageObj.src = imgUrl;
}

We need to be able to establish the canvas height / width based upon the image itself.

Any guidance or assistance is most appreciated.

I need some assistance. We seem to be having an issue with iOS with regards to getting the base64 of an image via HTML 5 / Canvas. Everything works fine if we use the default height / width of the canvas or hard code the height and width. However if we set the canvas height / width to that of the image src then the image won’t load into the canvas and therefore we won’t get the image as base64.

Code snippet which works:

function convertImageToBase64(imgUrl, callback) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    // load image from data url
    var imageObj= new Image();
    imageObj.onload = function () {
        var dataUrl;
        context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

        dataUrl = canvas.toDataURL("image/png");
        callback.call(this, dataUrl);
        canvas = null;
    };
    imageObj.src = imgUrl;
}

Code snippet which does not work on iOS but does work on Android:

function convertImageToBase64(imgUrl, callback) {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext('2d');
    // load image from data url
    var imageObj= new Image();
    imageObj.onload = function () {
        var dataUrl;
        canvas.width = imageObj.width;
        canvas.height = imageObj.height;
        context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

        dataUrl = canvas.toDataURL("image/png");
        callback.call(this, dataUrl);
        canvas = null;
    };
    imageObj.src = imgUrl;
}

We need to be able to establish the canvas height / width based upon the image itself.

Any guidance or assistance is most appreciated.

• javascript
• ios
• html
• canvas

• addendum: The code snippet does work on an iPad Mini but we are having issues with it on iPhone 4 w/ iOS 7x and iPhone 5 w/ iOS8. The iPad MINI has iOS 8 – David Yancey Commented Oct 2, 2014 at 1:36
• 2 iOS has some limits with canvas and images - github./scottjehl/Device-Bugs/issues/49. Check it. – Alex Commented Oct 2, 2014 at 5:45
• @Pinal thank you, that is what I'm discovering as the issue. I can't accept a ment as an answer however ;P – David Yancey Commented Oct 2, 2014 at 11:56

1 Answer 1

All this limits are actual for iOS:

• The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
• The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
• JavaScript execution time is limited to 10 seconds for each top-level entry point.

This limits don't throw any errors, so then you will try to render or read 6MB image you will get a broken blob/dataURL string and so on. And you will think that File API is broken, canvas methods toDataURL/toBlob are broken, and you will be right. But bugs aren't in browser, this is a system limitation.

So this limitations create a broken behavior for javascript API.