Resizing Image using canvas on iOS


#1

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
	}
}