2d:null 2e:["$","title",null,{"children":"Image comparator (slider) | Eric Portis | Observable"}] 33:[{"id":"7931d1a51deeda9b34c7a41a19baa27a55321c1d5c1d9074f8740f0c91cc4eabf02ff9812c8ed7f618a063aff6b3763ea0260cd238bd577c7f1d7d52a7da7e75","href":"https://static.observableusercontent.com/files/7931d1a51deeda9b34c7a41a19baa27a55321c1d5c1d9074f8740f0c91cc4eabf02ff9812c8ed7f618a063aff6b3763ea0260cd238bd577c7f1d7d52a7da7e75","name":"ssimulacra.wasm","type":"application/wasm","lastModified":1588011402120.538,"size":1939845},{"id":"90c21619a8c7285b45edbc0dafa8830a1f6d22fbe8fd5a6dcf24008e5687bca09930deb01b0d20b29cc035783a653d4884391ddadb888ad82896e52c3d144adb","href":"https://static.observableusercontent.com/files/90c21619a8c7285b45edbc0dafa8830a1f6d22fbe8fd5a6dcf24008e5687bca09930deb01b0d20b29cc035783a653d4884391ddadb888ad82896e52c3d144adb","name":"ssimulacra.js","type":"application/javascript","lastModified":1588011402120.538,"size":388615}] 31:{"id":"e53aa1fe0b46c9a4","slug":"image-comparator","title":"Image comparator (slider)","thumbnail":"151853ca425f4019fc19487f7d453a812c82a0fb4757fb2f26fd7b817d04c170","access_level":"public","create_time":"$D2020-04-27T18:16:42.120Z","update_time":"$D2020-04-27T18:49:58.367Z","view_time":null,"first_public_time":"$D2020-04-27T18:41:59.604Z","fork":{"id":"2aa4cf83a8feec02","slug":"ssimulacra-client-side","title":"Client-side SSIMULACRA","owner":{"id":"3301827868803b5f","login":"eeeps","name":"Eric Portis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3301827868803b5f","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":"starter_2024"},"version":268,"publish_version":268,"role":null,"authored":false,"authors":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null}],"members":[{"type":"individual","id":"641c0f2eb3a762f9","login":"eeeps","name":"Eric Portis","avatar_url":"https://avatars-next.observableusercontent.com/d9d2bbfe6f3f798e9ec8f3a91e0c10b7f6890314fd52f40e190022e173d838a9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Image comparator (slider)","cells":[{"id":0,"value":"md`# Image comparator (slider)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"viewof referenceURL = {\n const form = html`\n \n `;\n const update = () => { form.value = form.input.value };\n form.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"viewof compressedURL = {\n const form = html`\n \n `;\n const update = () => { form.value = form.input.value };\n form.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"viewof zoom = {\n const form = html`\n \n `;\n const output = form.querySelector('output');\n const update = () => {\n form.value = form.input.value;\n output.textContent = form.input.value + 'x';\n };\n form.addEventListener( 'input', update );\n update();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"comparator = {\n const one = await promisedImage(referenceURL),\n two = await promisedImage(compressedURL);\n one.setAttribute('id', 'one');\n two.setAttribute('id', 'two');\n const h = html`\n

${one}

${two}

`;\n h.imgs = [ one, two ];\n return h;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"ssimulacraScore = { \n ssimulacra.FS.writeFile(\"in1.ext\", one, {encoding: \"binary\"});\n ssimulacra.FS.writeFile(\"in2.ext\", two, {encoding: \"binary\"});\n return ssimulacra(\"in1.ext\", \"in2.ext\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"compressedFileSize = prettyBytes(await resourceBytes(compressedURL))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"ssimulacra = {\n const module = window.Module = {wasmBinaryFile: await FileAttachment(\"ssimulacra.wasm\").url()};\n const promise = new Promise(resolve => {\n module.onRuntimeInitialized = () => {\n const ssimulacra = module.cwrap(\"ssimulacra\", \"int\", [\"string\", \"string\"]);\n ssimulacra.FS = window.FS; // Re-attach the global.\n resolve(ssimulacra);\n };\n });\n require(await FileAttachment(\"ssimulacra.js\").url()).catch(() => {});\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"md`Emscripten'd SSIMULACRA stolen from Dominik Homberger – http://libwebpjs.hohenlimburg.org/ssimulacra/\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"one = urlToUint8Array(referenceURL)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"two = urlToUint8Array(compressedURL)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"async function urlToUint8Array(url) {\n const response = await fetch(url);\n return new Uint8Array(await response.arrayBuffer());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"promisedImage = (url) => new Promise( ( resolve, reject ) => {\n const i = new Image();\n i.crossOrigin = \"anonymous\";\n i.addEventListener( 'load', () => resolve( i ) );\n i.src = url;\n return i;\n} );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"resourceBytes = ( url ) => {\n const existingEntries = window.performance.getEntriesByName( url );\n if ( existingEntries.length > 0 ) {\n return existingEntries[0].encodedBodySize;\n } else {\n return new Promise( ( resolve, reject ) => {\n const po = new PerformanceObserver( ( list, obj ) => {\n for ( const entry of list.getEntriesByName( url ) ) {\n resolve( entry.encodedBodySize );\n po.disconnect();\n }\n } );\n po.observe( { entryTypes: [\"resource\"] } );\n } );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"prettyBytes = function( bytes ) {\n if ( Math.abs( bytes ) < 1000 ) {\n return `${ Math.round( bytes ) } B`;\n } else if ( Math.abs( bytes ) < 1000000 ) {\n return `${ Math.round( bytes / 100 ) / 10 } kB`\n } else {\n return `${ Math.round( bytes / 100000 ) / 10 } MB`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"