31:[{"id":"049d28b90a46079a7017946b2c23b9f8530d4e2d9cc49aa50c9b509067e24819af275341d5935584817c940946c5dea050d0826a9350a2aa657aa397a7581e42","href":"https://static.observableusercontent.com/files/049d28b90a46079a7017946b2c23b9f8530d4e2d9cc49aa50c9b509067e24819af275341d5935584817c940946c5dea050d0826a9350a2aa657aa397a7581e42","name":"049d28b90a46079a7017946b2c23b9f8530d4e2d9cc49aa50c9b509067e24819af275341d5935584817c940946c5dea050d0826a9350a2aa657aa397a7581e42.jpeg","type":"image/jpeg","lastModified":1599931744234.486,"size":73554}] 2f:{"title":"Iframe and Load Event","cells":[{"id":0,"value":"md`# Iframe and Load Event\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1266,"value":"md`It's common to await for an HTMLImageElement \\`load\\` event before using it, in order to have access to all its \"final\" properties, such as the width, height, etc.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"// From https://observablehq.com/@mbostock/file-input\nfunction getLoadedImage(src) {\n return new Promise((resolve, reject) => {\n const image = new Image();\n image.onload = () => resolve(image);\n image.onerror = reject;\n image.src = src;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1502,"value":"getLoadedImage(imgSrc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1516,"value":"md`But the same strategy cannot be used on an HTMLIFrameElement, because it lacks a constructor and IIRC it can only be created through the \\`