javascript canvas drawimage 是否适用于 iPhone？

Question

I have a web page that loads an image from an input and does a resize and rotate so it is always portrait and displays it to the screen. This works on desktop browsers and on android, but not on my friends iPhone.

function showImage(){
var input = document.getElementById("card");
    var filesToUpload = input.files;
    var file = filesToUpload[0];

    var img = document.createElement("img");
    var reader = new FileReader();

    reader.onload = function (e) {
        img.src = e.target.result
    }

    reader.onloadend = function () {
        var canvas = document.createElement("canvas");

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

        var ctx = canvas.getContext("2d");

        canvas.width = width;
        canvas.height = height;

        ctx.drawImage(img, 0, 0, width, height);

        var imgloc = document.getElementById("cardloc");

        imgloc.appendChild(canvas);

    }
    reader.readAsDataURL(file);}


<input id="card" name="card" type="file" accept="image/*" capture/>
<button type=button id="chooseButton" name="chooseButton" onclick="showImage()">
    Choose A card
</button>
<div id="cardloc"></div>

This is a cut down version of the code without the resize and rotate to demonstrate the problem. When working you can see the img.src is populated with the encoded image and also the canvas.toDataURL() is also returning the encoded image. On the iphone img.src is populated but canvas.toDataURL() is not, just 6 chars long denoting no image loaded.

I am all out of ideas, can anyone help?

Answer 1

It certainly does (though I don't have an iPhone at hand).

The problem here is that loading an Image is an asynchronous task (it is performed in parallel of JavaScript execution), even when the source is a data:URL, and that you can't draw an image that is not yet loaded on a canvas.

Now why does it work on some browsers? Because you are actually executing the drawing part asynchronously too, but in an unrelated event.

The underlying is a bit complex but basically a FileReader always fire two different events when it's done reading the Blob: onerror and onloadended or onload and onloadend , the onloadend firing right after the previous one.

Here you are setting the src of your <img> in the onload event, at that moment the browser will start loading the image. Since it's from a data: URL, it doesn't have much to do (no network request), so when the second event ( onloadend ) fires, it may actually already have loaded the image, and may thus be able to draw it on the canvas.
However, this is actually a fluck that it works.

The correct way to handle it is to wait for your image's onload event.

reader.onload = function (e) {
  img.onload = function () {

    var canvas = document.createElement("canvas");

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

    var ctx = canvas.getContext("2d");

    canvas.width = width;
    canvas.height = height;

    ctx.drawImage(img, 0, 0, width, height);

    var imgloc = document.getElementById("cardloc");

    imgloc.appendChild(canvas);

  };
  img.src = e.target.result
}
reader.readAsDataURL(file);

But you don't even need a FileReader here, you'd be better using a blob: URL which is just a pointer to the file on disk and thus avoids wasting memory, and also avoids one level of callback hell:

img.onload = function () {

  var canvas = document.createElement("canvas");

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

  var ctx = canvas.getContext("2d");

  canvas.width = width;
  canvas.height = height;

  ctx.drawImage(img, 0, 0, width, height);

  var imgloc = document.getElementById("cardloc");

  imgloc.appendChild(canvas);

}
img.src = URL.createObjectURL(file);

Ps: since you said you also do cropping, if you still have problems with Safari after this fix, then I invite you to read this Q/A about an actual bug in this browser (that I can't be sure you are facing with what you gave to us here).

Answer 2

Thanks for the help.

I knew the calls where asynchronous. I just hadn't spotted the img has an onload as well.

The img onload happens after the reader onloadend, and on android that wasn't a problem but with iPhones it was.

So I just needed to change the reader.onloaded to img.onload and everything is fine.

Many thanks