2d:null 2e:["$","title",null,{"children":"Async image loading, and CORS | Sylvain Lesage | Observable"}] 33:[] 31:{"id":"84852bdcce182e6a","slug":"async-image-loading-and-cors","title":"Async image loading, and CORS","thumbnail":"6d7d739ae909e34a924d9910cac63426317a1bec62d7c03aea9d2f79704a2268","access_level":"public","create_time":"$D2020-02-28T15:31:15.965Z","update_time":"$D2020-02-28T17:08:50.914Z","view_time":null,"first_public_time":"$D2020-02-28T16:46:36.794Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":208,"publish_version":208,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":{"id":"66aa9589446dfa80","slug":"image","title":"Image","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`## Listen to the load event`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"afterOnload(src).then(img => img.complete)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"afterOnload(src).then(crop)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"md`The canvas can be converted to an \\`\\` element using \\`toDataURL\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"afterOnload(src).then(img => crop(img).toDataURL())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"html`

\n crop(img).toDataURL()\n)}\" style=\"max-width: 300px\" />`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`## Call the decode() method`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"afterDecode(src).then(img => img.complete)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"afterDecode(src).then(crop)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"afterDecode(src).then(img => crop(img).toDataURL())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"html`

\n crop(img).toDataURL()\n)}\" style=\"max-width: 300px\" />`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"afterDecodeWithoutCORS(src).then(img => crop(img).toDataURL())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"html`

\n crop(img).toDataURL()\n)}\" style=\"max-width: 300px\" />`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"md`Note that other processings can be applied without trouble.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"afterDecodeWithoutCORS(src).then(img => img.complete)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"afterDecodeWithoutCORS(src).then(crop)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"src = 'https://images.unsplash.com/photo-1508138221679-760a23a2285b'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"