iPad not showing images from javascript

Question

I have this JS code to create a thumbnail of the uploaded image.

function handleFileSelect() {
    var canvas = document.getElementById("canvas");
    var img = document.createElement("img");
    var converted = document.getElementById("img22");

    // from an input element
    var file = document.querySelector('input[type=file]').files[0];

    var reader = new FileReader();
    reader.onload = function() {
        var blob = reader.result;
        img.src = blob;
        var resized = resizeImage(img); // send it to canvas to resize
        converted.src = resized;//resized blob
        converted.setAttribute("width", "50%");
        converted.style.display = "inline";//show the hidden pic
   };
   reader.readAsDataURL(file);
}


function resizeImage(img) {

    var canvas = document.getElementById('canvas');

    var width = img.width;
    var height = img.height;

    var max_width = 976;
    var max_height = 610;

    // calculate the width and height, constraining the proportions
    if (width > height) {
        if (width > max_width) {
            height = Math.round(height *= max_width / width);
            width = max_width;
        }
    } else {
        if (height > max_height) {
            width = Math.round(width *= max_height / height);
            height = max_height;
        }
    }

    // resize the canvas and draw the image data into it
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    return canvas.toDataURL("image/jpeg", 0.7); // get the data from canvas
}

HTML

 <img id="img22" src="" style="display:none;" />
 <canvas id="canvas" style="display:none"></canvas>

It works on Chrome/FF/IE8 in windows. It works also in Chrome android. However, in iPad Safari/Chrome/Firefox the image is not shown. (it only shows if I browse back to the previous page and forward again to the same page).

Answer 1

You need to wait for the image to load as setting the image source is asynchronous. Also, no need for FileReader as you can use the File object directly as source via Object-URL:

function handleFileSelect() {

    // from an input element
    var file = this.files[0];                           // "this" = caller element

    var img = document.createElement("img");
    img.onload = resizeImage;                           // wait here
    img.src = (URL || webkitURL).createObjectURL(file); // use Object-URL instead
}

Then in the resizing use this as a reference to the image in question, and update the preview afterwards:

function resizeImage() {    
    var img = this;    // short-cut for demo
    var canvas = document.getElementById('canvas');

    var width = img.width;
    var height = img.height;

    var max_width = 976;
    var max_height = 610;

    // calculate the width and height, constraining the proportions
    if (width > height) {
        if (width > max_width) {
            height = Math.round(height *= max_width / width);
            width = max_width;
        }
    } else {
        if (height > max_height) {
            width = Math.round(width *= max_height / height);
            height = max_height;
        }
    }

    // resize the canvas and draw the image data into it
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);

    // finally, update
    var converted = document.getElementById("img22");
    converted.src = canvas.toDataURL("image/jpeg", 0.7);
    converted.style.width = "50%";      // [image].width is read-only
    converted.style.display = "inline"; //show the hidden pic
}

Live example

picker.onchange = handleFileSelect;

function handleFileSelect() {

  // from an input element
  var file = this.files[0];                           // "this" = caller element

  var img = document.createElement("img");
  img.onload = resizeImage;                           // wait here
  img.src = (URL || webkitURL).createObjectURL(file); // use Object-URL instead
}

function resizeImage() {    
  var img = this;    // short-cut for demo
  var canvas = document.getElementById('canvas');

  var width = img.width;
  var height = img.height;

  var max_width = 976;
  var max_height = 610;

  // calculate the width and height, constraining the proportions
  if (width > height) {
    if (width > max_width) {
      height = Math.round(height *= max_width / width);
      width = max_width;
    }
  } else {
    if (height > max_height) {
      width = Math.round(width *= max_height / height);
      height = max_height;
    }
  }

  // resize the canvas and draw the image data into it
  canvas.width = width;
  canvas.height = height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, width, height);

  // finally, update
  var converted = document.getElementById("img22");
  converted.src = canvas.toDataURL("image/jpeg", 0.7);
  converted.style.width = "50%";      // [image].width is read-only
  converted.style.display = "inline"; //show the hidden pic
}

<label>Select image: <input type=file id=picker></label><br>
<img id="img22" style="display:none;" />
<canvas id="canvas" style="display:none"></canvas>