28:null 29:["$","title",null,{"children":"Extended drawImage | Sylvain Lesage | Observable"}] 2e:T4a0,viewof threeArgs = { const sClip = selectFlat({ description: "sClip", options: Object.keys(clipAlong), value: defaultSClip, output: true }); const sCrop = selectFlat({ description: "sCrop", options: Object.keys(expandCrop), value: defaultSCrop, output: true }); const objectFit = selectFlat({ description: "objectFit", options: Object.keys(fitContentInContainer), value: defaultObjectFit, output: true }); const row = html`

${sClip}${sCrop}${objectFit}

`; function updateRow() { row.value = { sClip: sClip.value, sCrop: sCrop.value, objectFit: objectFit.value }; row.dispatchEvent(new CustomEvent('input')); } sClip.addEventListener('input', updateRow); sCrop.addEventListener('input', updateRow); objectFit.addEventListener('input', updateRow); invalidation.then(() => { sClip.removeEventListener('input', updateRow); sCrop.removeEventListener('input', updateRow); objectFit.removeEventListener('input', updateRow); }); updateRow(); return row; }2f:T570,viewof s = { const sx = slider({ description: "sx", min: 0, max: image.naturalWidth, step: 1, value: initSrc.x }); const sy = slider({ description: "sy", min: 0, max: image.naturalHeight, step: 1, value: initSrc.y }); const sWidth = slider({ description: "sWidth", min: 0, max: image.naturalWidth, step: 1, value: initSrc.width }); const sHeight = slider({ description: "sHeight", min: 0, max: image.naturalHeight, step: 1, value: initSrc.height }); const row = html`

${sx}${sy}${sWidth}${sHeight}

`; function updateRow() { row.value = { x: sx.value, y: sy.value, width: sWidth.value, height: sHeight.value }; row.dispatchEvent(new CustomEvent('input')); } sx.addEventListener('input', updateRow); sy.addEventListener('input', updateRow); sWidth.addEventListener('input', updateRow); sHeight.addEventListener('input', updateRow); invalidation.then(() => { sx.removeEventListener('input', updateRow); sy.removeEventListener('input', updateRow); sWidth.removeEventListener('input', updateRow); sHeight.removeEventListener('input', updateRow); }); updateRow(); return row; }30:T578,viewof d = { const dx = slider({ description: "dx", min: 0, max: initDst.canvas.width, step: 1, value: initDst.x }); const dy = slider({ description: "dy", min: 0, max: initDst.canvas.height, step: 1, value: initDst.y }); const dWidth = slider({ description: "dWidth", min: 0, max: initDst.canvas.width, step: 1, value: initDst.width }); const dHeight = slider({ description: "dHeight", min: 0, max: initDst.canvas.height, step: 1, value: initDst.height }); const row = html`

${dx}${dy}${dWidth}${dHeight}

`; function updateRow() { row.value = { x: dx.value, y: dy.value, width: dWidth.value, height: dHeight.value }; row.dispatchEvent(new CustomEvent('input')); } dx.addEventListener('input', updateRow); dy.addEventListener('input', updateRow); dWidth.addEventListener('input', updateRow); dHeight.addEventListener('input', updateRow); invalidation.then(() => { dx.removeEventListener('input', updateRow); dy.removeEventListener('input', updateRow); dWidth.removeEventListener('input', updateRow); dHeight.removeEventListener('input', updateRow); }); updateRow(); return row; }31:Tdf1,function drawImage(ctx) { return function( image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, sClip = defaultSClip, sCrop = defaultSCrop, objectFit = defaultObjectFit ) { // TODO: maybe the same could be obtained only with ctx.scale and ctx.translate const sClipFn = clipAlong[sClip] || clipAlong[defaultSClip]; // TODO: dClip to clip/expand the destination drawing subrectangle const sCropFn = expandCrop[sCrop] || expandCrop[defaultSCrop]; // TODO: dCrop to expand the destination subrectangle const objectFitFn = fitContentInContainer[objectFit] || fitContentInContainer[defaultObjectFit]; // We specify the coordinates system with a prefix: // "d": destination canvas, "s": source canvas or image // "dObject" and "sObject" represent the same semantic object, but in different canvas // All the objects are rectangles represented with an Array: [x, y, width, height] // 1. Parse the source image rectangle (image) const sSourceImage = getSourceImageRectangle(...arguments); // 2. Parse the source sub-rectangle (sx, sy, sWidth, sHeight) // If none of sClip, sCrop, sObjectFit is provided, it's the rectangle that // will be drawn in the destination canvas const sSourceSubRectangle = getSourceSubRectangle(...arguments); // 3. Parse the destination sub-rectangle (dx, dy, dWidth, dHeight) const dDestinationSubRectangle = getDestinationSubRectangle(...arguments); // 4. Depending on sClip, expand the source sub-rectangle along none, x, y or both dimensions const sSourceClipSubRectangle = sClipFn(sSourceSubRectangle, sSourceImage); // 5. Define the source rectangle that will be cropped // Note that depending on the combination of sClip and sCrop, // this rectangle might be the same as sSourceClipSubRectangle. // Else, only the clipped part (sSourceClipSubRectangle) of this rectangle will be drawn const sSourceCropRectangle = sCropFn(sSourceClipSubRectangle, sSourceImage); // 6. Fit the source crop rectangle within the destination sub-rectangle // See https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit // TODO: implement dCrop to mimic sCrop in the destination canvas, and // fit the rectangle within the whole destination canvas instead of the sub-rectangle const dSourceCropRectangle = objectFitFn( sSourceCropRectangle, dDestinationSubRectangle ); // 7. Get the clip sub-rectangle in the destination coordinates const dSourceClipSubRectangle = changeCoordinates( sSourceClipSubRectangle, sSourceCropRectangle, dSourceCropRectangle ); // 8. Compute the intersection between the clip sub-rectangle and the destination sub-rectangle // This rectangle is where image will be drawn on the destination canvas // TODO: implement dClip to mimic sClip in the destination canvas // Note: the intersection might not exist const dIntersection = intersect( dSourceClipSubRectangle, dDestinationSubRectangle ); // DRAW if (dIntersection !== undefined) { // 9. Get the intersection rectangle (if it exists) in the source coordinates // This rectangle is the part of the source image that will be drawn const sIntersection = changeCoordinates( dIntersection, dSourceCropRectangle, sSourceCropRectangle ); ctx.save(); ctx.drawImage(image, ...sIntersection, ...dIntersection); ctx.restore(); } }; }32:Tec7,function showSource( image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, sClip, sCrop, objectFit ) { const sClipFn = clipAlong[sClip] || clipAlong[defaultSClip]; const sCropFn = expandCrop[sCrop] || expandCrop[defaultSCrop]; const objectFitFn = fitContentInContainer[objectFit] || fitContentInContainer[defaultObjectFit]; const sSourceImage = getSourceImageRectangle(...arguments); const sSourceSubRectangle = getSourceSubRectangle(...arguments); const dDestinationSubRectangle = getDestinationSubRectangle(...arguments); const sSourceClipSubRectangle = sClipFn(sSourceSubRectangle, sSourceImage); const sSourceCropRectangle = sCropFn(sSourceClipSubRectangle, sSourceImage); const dSourceCropRectangle = objectFitFn( sSourceCropRectangle, dDestinationSubRectangle ); const dSourceClipSubRectangle = changeCoordinates( sSourceClipSubRectangle, sSourceCropRectangle, dSourceCropRectangle ); const dIntersection = intersect( dSourceClipSubRectangle, dDestinationSubRectangle ); const sIntersection = dIntersection ? changeCoordinates( dIntersection, dSourceCropRectangle, sSourceCropRectangle ) : undefined; const sDestinationSubRectangle = changeCoordinates( dDestinationSubRectangle, dSourceCropRectangle, sSourceCropRectangle ); // DRAW // A. Create a canvas of the same size as the source image const obj = createAnnotatedContext(sSourceImage[2], sSourceImage[3]); // B. Draw the source image obj.atScale(ctx => { ctx.save(); ctx.filter = 'blur(2px)'; ctx.drawImage(image, ...sSourceImage, ...sSourceImage); ctx.restore(); }); // C. For reference: draw the destination sub-rectangle if (showRectangles.destinationSubRectangle) { obj.filterRect(...sDestinationSubRectangle, { color: rectangleColors.destinationSubRectangle, padding: rectanglePaddings.destinationSubRectangle }); obj.solidRect(...sDestinationSubRectangle, { color: rectangleColors.destinationSubRectangle, padding: rectanglePaddings.destinationSubRectangle }); } // D. Draw the source crop rectangle if (showRectangles.cropped) { obj.filterRect(...sSourceCropRectangle, { color: rectangleColors.cropped, padding: rectanglePaddings.cropped }); obj.solidRect(...sSourceCropRectangle, { color: rectangleColors.cropped, padding: rectanglePaddings.cropped }); } // E. Draw the source clip rectangle if (showRectangles.clipped) { obj.filterRect(...sSourceClipSubRectangle, { color: rectangleColors.clipped, padding: rectanglePaddings.clipped }); obj.solidRect(...sSourceClipSubRectangle, { color: rectangleColors.clipped, padding: rectanglePaddings.clipped }); } // F. (if any) Draw the intersection between the source clip rectangle // and the destination sub-rectangle if (showRectangles.intersection) { if (sIntersection) { // first: the clipped part of the image, unblurred // it's the result of our extended drawImage! obj.atScale(ctx => { ctx.save(); ctx.drawImage(image, ...sIntersection, ...sIntersection); ctx.restore(); }); // then the rectangle obj.solidRect(...sIntersection, { color: rectangleColors.intersection, padding: rectanglePaddings.intersection }); } } // G. For reference purpose: the source sub-rectangle if (showRectangles.sourceSubRectangle) { obj.solidRect(...sSourceSubRectangle, { color: rectangleColors.sourceSubRectangle, padding: rectanglePaddings.sourceSubRectangle }); } return html`

${obj.ctx.canvas}

`; }33:Tf7e,function showDestination( image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, sClip, sCrop, objectFit ) { const sClipFn = clipAlong[sClip] || clipAlong[defaultSClip]; const sCropFn = expandCrop[sCrop] || expandCrop[defaultSCrop]; const objectFitFn = fitContentInContainer[objectFit] || fitContentInContainer[defaultObjectFit]; const dDestinationCanvas = [ 0, 0, initDst.canvas.width, initDst.canvas.height ]; const sSourceImage = getSourceImageRectangle(...arguments); const sSourceSubRectangle = getSourceSubRectangle(...arguments); const dDestinationSubRectangle = getDestinationSubRectangle(...arguments); const sSourceClipSubRectangle = sClipFn(sSourceSubRectangle, sSourceImage); const sSourceCropRectangle = sCropFn(sSourceClipSubRectangle, sSourceImage); const dSourceCropRectangle = objectFitFn( sSourceCropRectangle, dDestinationSubRectangle ); const dSourceClipSubRectangle = changeCoordinates( sSourceClipSubRectangle, sSourceCropRectangle, dSourceCropRectangle ); const dIntersection = intersect( dSourceClipSubRectangle, dDestinationSubRectangle ); const sIntersection = dIntersection ? changeCoordinates( dIntersection, dSourceCropRectangle, sSourceCropRectangle ) : undefined; const dSourceSubRectangle = changeCoordinates( sSourceSubRectangle, sSourceCropRectangle, dSourceCropRectangle ); // DRAW // A. Create the destination canvas const obj = createAnnotatedContext( dDestinationCanvas[2], dDestinationCanvas[3], { width } ); // B. Draw a background for the destination canvas obj.atScale(ctx => { ctx.save(); ctx.filter = 'blur(2px)'; ctx.fillStyle = rectangleColors.destinationCanvas; ctx.fillRect(...dDestinationCanvas); ctx.restore(); }); // C. Draw the destination sub-rectangle if (showRectangles.destinationSubRectangle) { obj.filterRect(...dDestinationSubRectangle, { color: rectangleColors.destinationSubRectangle, padding: rectanglePaddings.destinationSubRectangle }); obj.solidRect(...dDestinationSubRectangle, { color: rectangleColors.destinationSubRectangle, padding: rectanglePaddings.destinationSubRectangle }); } // D. Draw the source crop rectangle if (showRectangles.cropped) { obj.filterRect(...dSourceCropRectangle, { color: rectangleColors.cropped, padding: rectanglePaddings.cropped }); obj.solidRect(...dSourceCropRectangle, { color: rectangleColors.cropped, padding: rectanglePaddings.cropped }); } // E. Draw the source clip rectangle if (showRectangles.dSourceClipSubRectangle) { obj.filterRect(...dSourceClipSubRectangle, { color: rectangleColors.clipped, padding: rectanglePaddings.clipped }); obj.solidRect(...dSourceClipSubRectangle, { color: rectangleColors.clipped, padding: rectanglePaddings.clipped }); } // F. (if any) Draw the intersection between the source clip rectangle // and the destination sub-rectangle if (showRectangles.intersection) { if (dIntersection) { // first: the clipped part of the image, unblurred // it's the result of our extended drawImage! obj.atScale(ctx => { ctx.save(); ctx.drawImage(image, ...sIntersection, ...dIntersection); ctx.restore(); }); // then the rectangle obj.solidRect(...dIntersection, { color: rectangleColors.intersection, padding: rectanglePaddings.intersection }); } } // G. For reference purpose: the source sub-rectangle if (showRectangles.sourceSubRectangle) { obj.solidRect(...dSourceSubRectangle, { color: rectangleColors.sourceSubRectangle, padding: rectanglePaddings.sourceSubRectangle }); } return html`

${obj.ctx.canvas}

`; }34:Te44,function createAnnotatedContext(originalWidth, originalHeight, options = {}) { const margin = { left: 100, top: 50, right: 200, bottom: 50, ...options.margin }; // defaults const specialOptions = { dashedLineDash: [4, 8], solidLineDash: [], filterRectGlobalAlpha: 0.2 }; const defaultOptions = { lineWidth: 2, lineCap: 'round', lineJoin: 'round', lineDash: specialOptions.solidLineDash, color: 'black', fontSize: 10, globalAlpha: 1, padding: 0 }; const w = Math.max(500, options.width || width); const imageWidth = w - margin.left - margin.right; const scale = imageWidth / originalWidth; const imageHeight = scale * originalHeight; const h = imageHeight + margin.top + margin.bottom; const ctx = DOM.context2d(w, h); function atScale(draw) { ctx.save(); ctx.translate(margin.left, margin.top); ctx.scale(scale, scale); draw(ctx); ctx.restore(); } function stroke(options) { const o = { ...defaultOptions, ...options }; ctx.save(); ctx.strokeStyle = o.color; ctx.lineWidth = o.lineWidth; ctx.lineCap = o.lineCap; ctx.lineJoin = o.lineJoin; ctx.setLineDash(o.lineDash); ctx.stroke(); ctx.restore(); } function fill(options) { const o = { ...defaultOptions, ...options }; ctx.save(); ctx.fillStyle = o.color; ctx.globalAlpha = o.globalAlpha; ctx.fill(); ctx.restore(); } function solidRect(x0, y0, width, height, options) { const o = { ...defaultOptions, ...options }; atScale(ctx => { ctx.beginPath(); ctx.rect( x0 - o.padding / scale, y0 - o.padding / scale, width + (2 * o.padding) / scale, height + (2 * o.padding) / scale ); }); stroke({ ...defaultOptions, lineDash: specialOptions.solidLineDash, ...options }); } function filterRect(x0, y0, width, height, options) { const o = { ...defaultOptions, ...options }; ctx.save(); atScale(ctx => { ctx.beginPath(); ctx.rect( x0 - o.padding / scale, y0 - o.padding / scale, width + (2 * o.padding) / scale, height + (2 * o.padding) / scale ); }); fill({ ...defaultOptions, globalAlpha: specialOptions.filterRectGlobalAlpha, ...options }); ctx.restore(); } function dashedLine(x0, y0, x1, y1, options) { const o = { ...defaultOptions, ...options }; ctx.save(); atScale(ctx => { ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); }); stroke({ ...defaultOptions, lineDash: specialOptions.dashedLineDash, ...options }); ctx.restore(); } const xOffset = { left: -10, right: 10, top: 0, bottom: 0 }; const yOffset = { left: 0, right: 0, top: -10, bottom: 10 }; const textAlign = { left: 'right', right: 'left', top: 'center', bottom: 'center' }; const textBaseline = { left: 'middle', right: 'middle', top: 'bottom', bottom: 'top' }; function text(t, x, y, position = 'left', options) { const o = { ...defaultOptions, ...options }; ctx.save(); atScale(ctx => { ctx.font = `${o.fontSize / scale}pt Calibri`; ctx.textAlign = textAlign[position]; ctx.textBaseline = textBaseline[position]; ctx.fillStyle = o.color; ctx.fillText( t, x + xOffset[position] / scale, y + yOffset[position] / scale ); }, o); ctx.restore(); } return { ctx, atScale, stroke, solidRect, dashedLine, text, filterRect }; }35:T7fe,fitContentInContainer = { const offsetAndScales = { fill: (content, container, ratio) => [0, 0, ratio[0], ratio[1]], contain: (content, container, ratio) => { if (ratio[0] > ratio[1]) { return [ (container[2] - content[2] * ratio[1]) / 2, 0, ratio[1], ratio[1] ]; } else { return [ 0, (container[3] - content[3] * ratio[0]) / 2, ratio[0], ratio[0] ]; } }, cover: (content, container, ratio) => { if (ratio[0] < ratio[1]) { return [ (container[2] - content[2] * ratio[1]) / 2, 0, ratio[1], ratio[1] ]; } else { return [ 0, (container[3] - content[3] * ratio[0]) / 2, ratio[0], ratio[0] ]; } }, none: (content, container, ratio) => [ (container[2] - content[2]) / 2, (container[3] - content[3]) / 2, 1, 1 ], 'scale-down': (content, container, ratio) => { const scale = Math.min(Math.min(ratio[0], ratio[1]), 1); return [ (container[2] - content[2] * scale) / 2, (container[3] - content[3] * scale) / 2, scale, scale ]; } }; const defaultOffsetAndScale = offsetAndScales[defaultObjectFit]; return Object.keys(offsetAndScales) .map(key => { return { key, value: (content, container) => { const ratio = [container[2] / content[2], container[3] / content[3]]; const offSetAndScale = offsetAndScales[key]( content, container, ratio ); return [ container[0] + offSetAndScale[0], container[1] + offSetAndScale[1], (container[2] * offSetAndScale[2]) / ratio[0], (container[3] * offSetAndScale[3]) / ratio[1] ]; } }; }) .reduce((a, c) => { a[c.key] = c.value; return a; }, {}); }36:T404,function thumbnail(sClip, sCrop, objectFit, emphasize) { const w = 150; const h = 70; const ctx = DOM.context2d(w, h); const src = { x: args[1], y: args[2], width: args[3], height: args[4] }; const dst = { x: 0, y: 0, width: w, height: h }; drawImage(ctx)( image, src.x, src.y, src.width, src.height, dst.x, dst.y, dst.width, dst.height, sClip, sCrop, objectFit ); ctx.strokeRect(dst.x, dst.y, dst.width, dst.height); return html`

${ctx.canvas} sClip: '${sClip}' sCrop: '${sCrop}' objectFit: '${objectFit}'

`; }37:[{"id":"b23acb6e76d1b7be04e0aa7351bc329c6e65c1c2341d77375302297d78ee99adec78e30a73d2c71afba7843f1a97dbbad3cae16bc0479d41e6fc3359fe5f7b35","href":"https://static.observableusercontent.com/files/b23acb6e76d1b7be04e0aa7351bc329c6e65c1c2341d77375302297d78ee99adec78e30a73d2c71afba7843f1a97dbbad3cae16bc0479d41e6fc3359fe5f7b35","name":"1280px-Vicugna_vicugna_Salar_de_Chalviri.jpg","type":"image/jpeg","lastModified":1587881490359.999,"size":321436}] 2c:{"id":"f4abdb36acd585ac","slug":"drawimage","title":"Extended drawImage","thumbnail":"3ab1b1584ec6fe6ea732dae75d5fbf6eb3d42d32c89e452cfbfb18cc3294297a","access_level":"public","create_time":"$D2020-04-26T06:11:30.359Z","update_time":"$D2020-10-30T23:49:20.161Z","view_time":null,"first_public_time":"$D2020-04-26T20:02:06.846Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":1627,"publish_version":1627,"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,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"66aa9589446dfa80","slug":"image","title":"Image","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"type":"notebook","body":{"title":"Extended drawImage","cells":[{"id":0,"value":"md`# Extended drawImage\n\nAdds \\`sClip\\`, \\`sCrop\\` and \\`objectFit\\` to [drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)\n\nInstall\n\n~~~{js}\nimport {drawImage} from '@severo/drawimage'\n~~~\n\nUse\n\n~~~{js}\ndrawImage(ctx)\n (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, sClip, sCrop, objectFit);\n ----- ----- ---------\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"md`---\n\n## Sandbox\n\nTry the new drawImage arguments: \\`sClip\\`, \\`sCrop\\` and \\`objectFit\\`.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"showDestination(...args)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"md`## Tweak\n\nUpload your image, and tweak the parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"viewof image = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: await FileAttachment(\n \"1280px-Vicugna_vicugna_Salar_de_Chalviri.jpg\"\n ).url()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"showSource(...args)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"args = [\n image,\n s.x,\n s.y,\n s.width,\n s.height,\n d.x,\n d.y,\n d.width,\n d.height,\n threeArgs.sClip,\n threeArgs.sCrop,\n threeArgs.objectFit\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"md`\n~~~{js}\ndrawImage(ctx)\n (image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, sClip, sCrop, objectFit);\n ----- ----- ---------\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1489,"value":"viewof showRectangles = {\n const options = [\n { value: \"intersection\", label: \"Extracted rectangle\" },\n { value: \"sourceSubRectangle\", label: \"Source sub-rectangle\" },\n { value: \"destinationSubRectangle\", label: \"Destination sub-rectangle\" },\n { value: \"cropped\", label: \"Cropped rectangle\" },\n { value: \"clipped\", label: \"Clipped rectangle\" }\n ];\n const c = checkbox({\n title: \"Intermediate regions\",\n description: \"Add some color to understand the intermediate steps\",\n options,\n value: [\"intersection\", \"cropped\"]\n });\n\n const row = html`

${c}

`;\n function updateRow() {\n row.value = options.reduce((acc, o) => {\n acc[o.value] = c.value.includes(o.value);\n return acc;\n }, {});\n row.dispatchEvent(new CustomEvent('input'));\n }\n c.addEventListener('input', updateRow);\n invalidation.then(() => {\n c.removeEventListener('input', updateRow);\n });\n updateRow();\n return row;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"md`## Documentation\n\nThe CanvasRenderingContext2D \\`ctx\\` must be passed to \\`drawImage\\`, and then the arguments are passed to the resulting function:\n\n~~~{js}\ndrawImage(ctx)(...args)\n~~~\n\nContrarily to the CanvasRenderingContext2D's [\\`drawImage\\`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) method, the first 9 arguments are not optional and must be provided: \\`image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight\\`.\n\nAny [CanvasImageSource](https://developer.mozilla.org/en-US/docs/Web/API/CanvasImageSource) object should be supported as the first argument \\`image\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"md`### sClip\n\nDefines the clipping region in the source image (the pixels that what will be drawn).\n\n- \\`xy\\` (default): the source image is clipped to the source sub-rectangle (sx, sy, sWidth, sHeight), as in ctx.drawImage\n- \\`x\\`: the source image is clipped along the x axis, so that a vertical slice of the image is drawn\n- \\`y\\`: the source image is clipped along the y axis, so that an horizontal slice of the image is drawn\n- \\`image\\`: the source image is drawn\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"html`\n

\n ${sClipValues.map(clip => thumbnail(clip, 'clip', 'fill', 'sClip'))}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"md`### sCrop\n\nDefines the extent of the rectangle used to crop the source image.\n\n- \\`clip\\` (default): the clipping region\n- \\`image\\`: the source image\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"html`\n

\n ${sCropValues.map(crop => thumbnail('xy', crop, 'fill', 'sCrop'))}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"md`Note: see how \\`sClip\\` combines with \\`sCrop: 'image'\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"html`\n

\n ${sClipValues.map(clip => thumbnail(clip, 'image', 'fill', 'sClip'))}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"md`### objectFit\n\nDefines how the cropped region fits within the destination area. \n\n- \\`fill\\` (default): the cropped region is sized to fill the destination’s content box\n- \\`contain\\`: the cropped region is sized to maintain its aspect ratio while filling within the destination’s content box\n- \\`cover\\`: the cropped region is sized to maintain its aspect ratio while filling the destination’s entire content box\n- \\`none\\`: the cropped region is not resized\n- \\`scale-down\\`: the cropped region is sized as if \\`none\\` or \\`contain\\` were specified, whichever would result in a smaller concrete object size.\n\nNote: it behaves like the [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)'s CSS property.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"html`\n

\n ${objectFitValues.map(objectFit =>\n thumbnail('xy', 'clip', objectFit, 'objectFit')\n )}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"md`## Complete gallery\n\nI know you want to see the 40 possible arrangements. Here they are.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"html`\n

\n ${sClipValues\n .map(clip =>\n sCropValues\n .map(crop =>\n objectFitValues\n .map(objectFit => thumbnail(clip, crop, objectFit))\n .flat()\n )\n .flat()\n )\n .flat()} \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"md`---\n\n## Credits\n\nDeveloped for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage.\n\nImage: https://commons.wikimedia.org/wiki/File:Vicugna_vicugna_Salar_de_Chalviri.jpg\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"function getSourceSubRectangle(\n image,\n sx,\n sy,\n sWidth,\n sHeight,\n dx,\n dy,\n dWidth,\n dHeight,\n sClip,\n sCrop,\n objectFit\n) {\n return [sx, sy, sWidth, sHeight];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"function getDestinationSubRectangle(\n image,\n sx,\n sy,\n sWidth,\n sHeight,\n dx,\n dy,\n dWidth,\n dHeight,\n sClip,\n sCrop,\n objectFit\n) {\n return [dx, dy, dWidth, dHeight];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"function getSourceImageRectangle(\n image,\n sx,\n sy,\n sWidth,\n sHeight,\n dx,\n dy,\n dWidth,\n dHeight,\n sClip,\n sCrop,\n objectFit\n) {\n return [\n 0,\n 0,\n image.naturalWidth || image.videoWidth || image.width,\n image.naturalHeight || image.videoHeight || image.height\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1401,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1404,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1506,"value":"rectanglePaddings = ({\n sourceSubRectangle: 0,\n destinationSubRectangle: 0,\n intersection: 0,\n clipped: 0,\n cropped: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1565,"value":"// http://clrs.cc/\nrectangleColors = ({\n sourceSubRectangle: '#FF4136',\n destinationSubRectangle: '#85144b',\n destinationCanvas: '#D7CCC8',\n intersection: '#111111',\n clipped: '#B10DC9',\n cropped: '#39CCCC'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1255,"value":"function rectToBbox(rect) {\n // width and height are assumed to be positive\n return [rect[0], rect[1], rect[0] + rect[2], rect[1] + rect[3]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"function bboxToRect(bbox) {\n // x0,y0 is assumed to be top-left\n return [bbox[0], bbox[1], bbox[2] - bbox[0], bbox[3] - bbox[1]];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"function intersect(a, b) {\n const aBbox = rectToBbox(a);\n const bBbox = rectToBbox(b);\n const intersectionBbox = [\n Math.max(aBbox[0], bBbox[0]),\n Math.max(aBbox[1], bBbox[1]),\n Math.min(aBbox[2], bBbox[2]),\n Math.min(aBbox[3], bBbox[3])\n ];\n if (\n intersectionBbox[2] < intersectionBbox[0] ||\n intersectionBbox[3] < intersectionBbox[1]\n ) {\n // No intersection\n return undefined;\n }\n return bboxToRect(intersectionBbox);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"function changeCoordinates(s, from, to) {\n const scaleX = to[2] / from[2];\n const scaleY = to[3] / from[3];\n return [\n to[0] + scaleX * (s[0] - from[0]),\n to[1] + scaleY * (s[1] - from[1]),\n scaleX * s[2],\n scaleY * s[3]\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"clipAlong = ({\n xy: (from, to) => from,\n x: (from, to) => [from[0], to[1], from[2], to[3]],\n y: (from, to) => [to[0], from[1], to[2], from[3]],\n image: (from, to) => to\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"expandCrop = ({\n clip: (clip, image) => clip,\n image: (clip, image) => image\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1413,"value":"sClipValues = Object.keys(clipAlong)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"sCropValues = Object.keys(expandCrop)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1419,"value":"objectFitValues = Object.keys(fitContentInContainer)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"defaultSClip = 'xy'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"defaultSCrop = 'clip'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"defaultObjectFit = 'fill'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"initSrc = ({ x: 50, y: 370, width: 360, height: 280 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"initDst = ({\n canvas: { width: 600, height: 400 },\n x: 0,\n y: 0,\n width: 600,\n height: 400\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"initUrl = await FileAttachment(\n \"1280px-Vicugna_vicugna_Salar_de_Chalviri.jpg\"\n).url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"import { selectFlat } from '@fil/selectflat'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"import { slider, checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2d:"$2c:body"