31:T418,canvas = { const { width, height } = sourceImage; const context = DOM.context2d(width, height, 1); const context2 = DOM.context2d(width, height, 1); const context3 = DOM.context2d(width, height, 1); context.drawImage(sourceImage, 0, 0, width, height); context2.drawImage(sourceImage, 0, 0, width, height); context3.drawImage(sourceImage, 0, 0, width, height); await deepFryFactory(DOM.context2d, toJpegCanvas)(context, seed, options.quality, options.iterations, options.jitterX, options.jitterY); await deepFryFactory(DOM.context2d, toJpegMozjpeg)(context2, seed, options.quality, options.iterations, options.jitterX, options.jitterY); await deepFryFactory(DOM.context2d, toJpegTurbo)(context3, seed, options.quality, options.iterations, options.jitterX, options.jitterY); return htl.html`

Browser encoder${context.canvas}

libjpeg-turbo${context3.canvas}

`; }32:T4bf,async function toJpegTurbo(context, quality) { return new Promise((resolve, reject) => { const { width, height } = context.canvas; const { data: rgba } = context.getImageData(0, 0, width, height); // convert 4 channel rgba to 3 channel rgb const rgb = new Uint8Array(width * height * 3); for (let i = 0, j = 0; i < rgba.length; i += 4, j += 3) { rgb[j] = rgba[i]; rgb[j + 1] = rgba[i + 1]; rgb[j + 2] = rgba[i + 2]; } const encoder = new libjpegturbo.JPEGEncoder(); const decodedBytes = encoder.getDecodedBuffer({ width, height, bitsPerSample: 8, componentCount: 3, // channels isSigned: false, }); decodedBytes.set(rgb); encoder.setProgressive(0); encoder.setQuality(quality * 100); encoder.encode(); // iterations? const encodedBytes = encoder.getEncodedBuffer(); const encoded = new Uint8Array(encodedBytes).toBase64(); const dataUrl = `data:image/jpeg;base64,${encoded}`; const image = new Image(); image.onload = () => resolve(image); image.onerror = reject; image.src = dataUrl; encoder.delete(); }); };33:[{"id":"52468e1409a71b59e94edef09bc22239c89a1be4385fc836d468c4bdc44cc60b16b66eefafcebd98937c0cb12ec8a28567dc9c68f585e742c20831db4f970b60","href":"https://static.observableusercontent.com/files/52468e1409a71b59e94edef09bc22239c89a1be4385fc836d468c4bdc44cc60b16b66eefafcebd98937c0cb12ec8a28567dc9c68f585e742c20831db4f970b60","name":"peanuts_static.jpg","type":"image/jpeg","lastModified":1778806821973.247,"size":60865}] 2f:{"title":"Canvas JPEG Deep Fryer","cells":[{"id":0,"value":"# Canvas JPEG Deep Fryer\n\n[@mbostock/jpeg-deep-fryer](https://observablehq.com/@mbostock/jpeg-deep-fryer), but as a function with a set number of iterations and BYO-encoder","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"viewof file = Inputs.file({label: \"Image\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"viewof options = Inputs.form({\n quality: Inputs.range([0, 1], {label: \"Quality\", step: 0.01, value: 0.1}),\n iterations: Inputs.range([1, 300], {label: \"Iterations\", step: 1, value: 50}),\n jitterX: Inputs.range([0, 50], {label: \"X jitter\", step: 1, value: 10}),\n jitterY: Inputs.range([0, 50], {label: \"Y jitter\", step: 1, value: 10}),\n grayscale: Inputs.toggle({label: \"Grayscale\", value: false})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"deepFry = deepFryFactory(DOM.context2d, toJpegCanvas)","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"function deepFryFactory(context2d, toJpeg) {\n return async function deepFry(context, seed = 42, quality = 0.1, iterations = 50, jitterX = 10, jitterY = jitterX) {\n const {width, height} = context.canvas;\n const context2 = context2d(width + jitterX * 2, height + jitterY * 2, 1);\n const random = d3.randomUniform.source(d3.randomLcg(seed))(0, 1);\n \n for (let i = 0; i < iterations; i++) {\n const x = random() * jitterX | 0;\n const y = random() * jitterY | 0;\n context2.drawImage(context.canvas, x, y, width, height);\n const image = await toJpeg(context2, quality);\n context.drawImage(image, x, y, width, height, 0, 0, width, height);\n URL.revokeObjectURL(image.src);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"async function toJpegCanvas(context, quality) {\n return new Promise((resolve, reject) => {\n context.canvas.toBlob(blob => {\n const image = new Image;\n image.onload = () => resolve(image);\n image.onerror = reject;\n image.src = URL.createObjectURL(blob);\n }, \"image/jpeg\", quality);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"async function toJpegMozjpeg(context, quality) {\n return new Promise((resolve, reject) => {\n const {width, height} = context.canvas;\n const data = context.getImageData(0, 0, width, height);\n mozjpeg.encode(data, {\n quality: quality * 100,\n // baseline: true,\n // arithmetic: true,\n progressive: false,\n optimize_coding: false,\n // smoothing: 0,\n color_space: options.grayscale ? 1 : 3,\n quant_table: 0,\n trellis_multipass: true,\n // trellis_opt_zero: true,\n // trellis_opt_table: true,\n trellis_loops: 1,\n // auto_subsample: false,\n // chroma_subsample: 1,\n // separate_chroma_quality: false,\n // chroma_quality: 75,\n }).then((buffer) => {\n const blob = new Blob([buffer], { type: \"image/jpeg\" });\n const image = new Image;\n image.onload = () => resolve(image);\n image.onerror = reject;\n image.src = URL.createObjectURL(blob);\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"seed = 42","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"sourceImage = (file ?? FileAttachment(\"peanuts_static.jpg\")).image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"mozjpeg = (await import(\"https://esm.sh/@jsquash/jpeg\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"// libjpegturbojs = (await import(\"https://esm.sh/@cornerstonejs/codec-libjpeg-turbo-8bit/wasmjs\")).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"libjpegturbojs = require(\"@cornerstonejs/codec-libjpeg-turbo-8bit\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"libjpegturbo = await libjpegturbojs()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}