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.
All this limits are actual for iOS:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With