JavaScript-Load-Image icon indicating copy to clipboard operation
JavaScript-Load-Image copied to clipboard

doesn't work with jpeg datauri on iOS 9

Open littlee opened this issue 4 years ago • 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);
};

littlee avatar Feb 03 '21 05:02 littlee

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?

blueimp avatar Sep 25 '21 01:09 blueimp