René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"doesn't work with  jpeg datauri on iOS 9","articleBody":"```js\r\nconst 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==`\r\n\r\nloadImage(imgUrl,img =\u003e {\r\n    document.body.appendChild(img);\r\n  },\r\n  {\r\n    maxWidth: 750,\r\n    orientation: true,\r\n    canvas: true\r\n  })\r\n```\r\n\r\nthe code above will throw a network error on iOS 9\r\n\r\n```\r\nXMLHttpRequest Exception 101: A network error occurred in synchronous requests\r\n```\r\nmy temporary solution is replacing `loadImage.fetchBlob` with the function below\r\n\r\n```js\r\nloadImage.fetchBlob = function (url, callback, options) {\r\n  function executor(resolve, reject) {\r\n    var img = new Image();\r\n    img.src = url;\r\n    img.onload = function () {\r\n      var c = document.createElement('canvas');\r\n      c.width = img.width;\r\n      c.height = img.height;\r\n      var ctx = c.getContext('2d');\r\n      ctx.drawImage(img, 0, 0);\r\n      c.toBlob(bin =\u003e {\r\n        resolve(bin);\r\n      });\r\n    };\r\n    img.onerror = function() {\r\n      reject(Error('load image fail'))\r\n    }\r\n  }\r\n  if (global.Promise \u0026\u0026 typeof callback !== 'function') {\r\n    options = callback; // eslint-disable-line no-param-reassign\r\n    return new Promise(executor);\r\n  }\r\n  return executor(callback, callback);\r\n};\r\n```\r\n","author":{"url":"https://github.com/littlee","@type":"Person","name":"littlee"},"datePublished":"2021-02-03T05:36:19.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1},"url":"https://github.com/130/JavaScript-Load-Image/issues/130"}