31:[] 2f:{"title":"Brushed Image View Zoom Example","cells":[{"id":0,"value":"md`# Brushed Image View Zoom Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof brushedImageInput = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"{\n if(brushedImageInput.height > brushedImageInput.width){\n return html`

${viewof brushedImage}

${zoomed}

`\n }\n return html`

${viewof brushedImage}

${zoomed}

}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof smoothing","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"viewof regionSelection","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"{\n const region = regions[ regionNames.indexOf(regionSelection)]\n setRegion([x.invert(region[0]), y.invert(region[1]), x.invert(region[2]), y.invert(region[3])])\n return md`Handle region selection`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"zoomed = { \n const canvas = document.createElement('canvas')\n canvas.width = scaledWidth \n canvas.height = scaledHeight \n const ctx = canvas.getContext('2d')\n\n if(smoothing === false){\n // turn off image aliasing\n ctx.msImageSmoothingEnabled = false;\n ctx.mozImageSmoothingEnabled = false;\n ctx.webkitImageSmoothingEnabled = false;\n ctx.imageSmoothingEnabled = false;\n }\n\n ctx.drawImage(selectedPatch, 0, 0, scaledWidth, scaledHeight)\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"scaledHeight = {\n const sheight = brushedImage[3] - brushedImage[1]\n const swidth = brushedImage[2] - brushedImage[0]\n return Math.min(brushedImageInput.height,parseInt(sheight * width / swidth))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"scaledWidth = {\n const sheight = brushedImage[3] - brushedImage[1]\n const swidth = brushedImage[2] - brushedImage[0]\n return parseInt(scaledHeight * swidth / sheight)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"width = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { viewof brushedImage, selectedPatch, setRegion, x, y } with {brushedImageInput as brushedImageInput} from '@jonhelfman/brushed-image-view'","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"import { viewof smoothing } from '@jonhelfman/lab-palette-extraction-base'","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"import { regions, regionNames, viewof regionSelection } from '@jonhelfman/brushed-image-view-example-3'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}