5

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.

3
  • 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 Oct 2, 2014 at 1:36
  • 2
    iOS has some limits with canvas and images - github.com/scottjehl/Device-Bugs/issues/49. Check it.
    – Alex
    Oct 2, 2014 at 5:45
  • @Pinal thank you, that is what I'm discovering as the issue. I can't accept a comment as an answer however ;P Oct 2, 2014 at 11:56

1 Answer 1

17

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.