Hi, I have the below code which takes a file the user selects and resizes it using a < canvas >, it works when tested on a browser but simply returns ‘data:,’
Has anyone got an experience in doing this?
if(fullSizeImage) {
field.dataUrl = event.target.result; // Works on browser and iOS
}
else {
var img = document.createElement("img");
img.src = event.target.result;
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var MAX_WIDTH = 250;
var MAX_HEIGHT = 250;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
field.dataUrl = canvas.toDataURL();
//console.log(field.dataUrl); // Works on browser but not iOS - Returns 'data:,' on iOs
}
}