31:[] 2f:{"title":"Async image loading, and CORS","cells":[{"id":0,"value":"md`# Async image loading, and CORS\n\nAn HTML \\`\\` element will be rendered in the browser once the image has been downloaded and decoded:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`But to get access to the corresponding HTMLImageElement in JavaScript, you have to wait for the download and decoding to have succeeded. There are two ways to do it: listen to the [load event](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload), or get a Promise using the [decode method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`## Listen to the load event`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"afterOnload = src =>\n new Promise((resolve, reject) => {\n const img = new Image();\n img.onload = () => resolve(img);\n img.onerror = reject;\n img.crossOrigin = \"anonymous\";\n img.src = src;\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`Two remarks:\n\n- this function returns a Promise, making it easier to manage the event: just await for the image\n- not sure it changes anything in modern browsers, but img.onload and img.onerror are set before img.src to [be sure to capture the events](https://stackoverflow.com/questions/14648598/is-it-necessary-to-set-onload-function-before-setting-src-for-an-image-object)\n\nWhen the Promise has resolved, [img.complete](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete) is true, indicating the image has loaded.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"afterOnload(src).then(img => img.complete)","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`Any image processing is possible from this point, eg. croping and resizing the image in a canvas.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"afterOnload(src).then(crop)","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`The canvas can be converted to an \\`\\` element using \\`toDataURL\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"afterOnload(src).then(img => crop(img).toDataURL())","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"html`

\n crop(img).toDataURL()\n)}\" style=\"max-width: 300px\" />`","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`## Call the decode() method`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"afterDecode = src => {\n const img = new Image();\n img.crossOrigin = \"anonymous\";\n img.src = src;\n return img.decode().then(() => img);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`No particular remark here, the code is much simpler.\n\nAfter the Promise has resolved, img.complete is true, and the image processings are working as expected`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"afterDecode(src).then(img => img.complete)","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"afterDecode(src).then(crop)","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"afterDecode(src).then(img => crop(img).toDataURL())","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"html`

\n crop(img).toDataURL()\n)}\" style=\"max-width: 300px\" />`","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"md`## Note on crossOrigin and toDataURL\n\nBoth functions contain the following line:\n\n~~~javascript\n img.crossOrigin = \"anonymous\";\n~~~\n\nIn our use case, it's required by the toDataURL method of the canvas. If you don't specify [crossOrigin](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin), the image is fetched without CORS (the fetch no-cors mode) and the toDataURL method will [throw a security exception](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#Exceptions).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"afterDecodeWithoutCORS = src => {\n const img = new Image();\n img.src = src;\n return img.decode().then(() => img);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`**Error!**\n\nThe operation is considered insecure because the image has been fetched with the no-cors mode.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"afterDecodeWithoutCORS(src).then(img => crop(img).toDataURL())","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"html`

\n crop(img).toDataURL()\n)}\" style=\"max-width: 300px\" />`","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`Note that other processings can be applied without trouble.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"afterDecodeWithoutCORS(src).then(img => img.complete)","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"afterDecodeWithoutCORS(src).then(crop)","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`---\n\n## Credits\n\nDeveloped for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage.\n\nPhoto by David Kovalenko on [Unsplash](https://unsplash.com/photos/G85VuTpw6jg)\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"src = 'https://images.unsplash.com/photo-1508138221679-760a23a2285b'","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"crop = img => {\n const iw = img.naturalWidth;\n const ih = img.naturalHeight;\n const ixcrop = 0;\n const iwcrop = iw;\n const iycrop = ih / 3;\n const ihcrop = ih / 5;\n\n const ow = 400;\n const oh = (ihcrop * ow) / iwcrop;\n const ctx = DOM.context2d(ow, oh, 1);\n ctx.drawImage(img, ixcrop, iycrop, iwcrop, ihcrop, 0, 0, ow, oh);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}