blueimp/JavaScript-Load-Image

doesn't work with jpeg datauri on iOS 9

littlee opened this issue · 1 comments

const imgUrl = `data:image/jpg;base64,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ePm4qK2jkXU7CNLWaGOLzjmVt/3kx1ycdK6SXTbSe7+2zIHfZ5eGAIxnPQjrQByEbj+2JT/ayj9yv7393zyfl9OPzrU0Y7tXuyLkXX7uP94Nv+1x8vHFNubaCx1Zrh7IywSQhR5UYfawJzkD1HepkvS08MOl2ckG+Qeazw7F2DOefX0oAhjs3t/EsdxM5kknSU+wUEBVA9h+tU9RitJL6V2WxJ3cmSdlbjjkDgGt24Rzr1q4B2iGQE44GStY9qs0c95nTftO65kIc7Bwcf3uf6UAT6HHbRXbGMWgJQj9xKXbqOx7e9dZXJ2yytrcEhsjaKIpAcbSDnHdf611lAGfdWcZc38MKPdIhEZb9Oa5J7PW5lFxq2qCxL/dQHbj24ZR+prva5rXvDsOsFJkby5VwC3UFc9Meo7UAVrC212K4W1u5I76ylU5dsHj+Zz+I966a2toLOFbe2QJGvQCmWVlBp9slpbDCIO/U+pPuat0AFFFFAH/0fQ6KKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//9L0OiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP//T9DooooAKKKM45NABnHJrEuLuW5lFvZnvyw/z0pLq6ku5PstryD1Pr/8AWrStbVLVNo5Y9TQBYUMFAc5OOTTqKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//1PQ6KKKACobiIzwtEGK57ipqKAMCylFlM1vcKFyfvf57Vv1Uu7RLpMHhh0NULO7eB/sl1xjgE9v/AK1AG1RRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH//1fQ6KKKACiiigAqpdWcd0Bu4I7j0q3RQA1VCKEHQDFOoooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//2Q==`

loadImage(imgUrl,img => {
    document.body.appendChild(img);
  },
  {
    maxWidth: 750,
    orientation: true,
    canvas: true
  })

the code above will throw a network error on iOS 9

XMLHttpRequest Exception 101: A network error occurred in synchronous requests

my temporary solution is replacing loadImage.fetchBlob with the function below

loadImage.fetchBlob = function (url, callback, options) {
  function executor(resolve, reject) {
    var img = new Image();
    img.src = url;
    img.onload = function () {
      var c = document.createElement('canvas');
      c.width = img.width;
      c.height = img.height;
      var ctx = c.getContext('2d');
      ctx.drawImage(img, 0, 0);
      c.toBlob(bin => {
        resolve(bin);
      });
    };
    img.onerror = function() {
      reject(Error('load image fail'))
    }
  }
  if (global.Promise && typeof callback !== 'function') {
    options = callback; // eslint-disable-line no-param-reassign
    return new Promise(executor);
  }
  return executor(callback, callback);
};

Thanks for your report @littlee.
Unfortunately I don't have a access to a iOS 9 test device (and it seems simulator runtimes are only available down to iOS 11 for me).
Is this issue limited to iOS9 or does it also occur in other versions?