30:[{"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}] 2e:{"title":"Image comparator (slider)","cells":[{"id":0,"value":"md`# Image comparator (slider)`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":229,"value":"compressedFileSize = prettyBytes(await resourceBytes(compressedURL))","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":171,"value":"md`Emscripten'd SSIMULACRA stolen from Dominik Homberger – http://libwebpjs.hohenlimburg.org/ssimulacra/\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"one = urlToUint8Array(referenceURL)","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"two = urlToUint8Array(compressedURL)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":210,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}