javascript - iPad 不显示来自 javascript 的图像

Question

我有这个 JS 代码来创建上传图像的缩略图。

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>

它适用于 Windows 中的 Chrome/FF/IE8。它也适用于 Chrome android。但是，在 iPad Safari/Chrome/Firefox 中，不会显示图像。 (它仅显示我是否浏览回上一页并再次转发到同一页面)。

Answer 1

由于设置图像源是异步的，因此需要等待图像加载。另外，不需要 FileReader，因为您可以通过 Object-URL 直接使用 File 对象作为源:

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
}

然后在调整大小时使用 this 作为对相关图像的引用，然后更新预览:

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
}

实例

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>