2e:null 2f:["$","title",null,{"children":"Brushed Image View Zoom Example | Jonathan Helfman | Observable"}] 34:[] 32:{"id":"3ede3f43154bcccd","slug":"brushed-image-view-zoom-example","title":"Brushed Image View Zoom Example","thumbnail":"5f7630a48d4091f6390820f89115b9ce1fbe7b1ef724f86b10d0fe1fca632b0e","access_level":"public","create_time":"$D2020-05-16T15:21:25.200Z","update_time":"$D2023-04-17T15:31:04.151Z","view_time":null,"first_public_time":"$D2020-05-16T17:08:08.731Z","has_unpublished_edits":null,"fork":{"id":"23366a12bdbf6e66","slug":"brushed-image-view-example","title":"Brushed Image View Example","owner":{"id":"6c3b7072b5e94b97","login":"jonhelfman","name":"Jonathan Helfman"}},"stars":2,"starred":false,"owner":{"type":"team","id":"6c3b7072b5e94b97","login":"jonhelfman","name":"Jonathan Helfman","avatar_url":"https://avatars-next.observableusercontent.com/a404535763c16060490629d896d876b5b4cea8c603c4993b2aaed749a15b041a","tier":"starter_2024"},"version":151,"publish_version":151,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba5c813f0f621f19","login":"jonhelfman","name":"Jonathan Helfman","avatar_url":"https://avatars-next.observableusercontent.com/a404535763c16060490629d896d876b5b4cea8c603c4993b2aaed749a15b041a","tier":null}],"members":[{"type":"individual","id":"ba5c813f0f621f19","login":"jonhelfman","name":"Jonathan Helfman","avatar_url":"https://avatars-next.observableusercontent.com/a404535763c16060490629d896d876b5b4cea8c603c4993b2aaed749a15b041a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"0f86e5291b844e86","slug":"image-tiles","title":"Image Tiles","owner":{"id":"6c3b7072b5e94b97","login":"jonhelfman","name":"Jonathan Helfman"}},"type":"notebook","body":{"title":"Brushed Image View Zoom Example","cells":[{"id":0,"value":"md`# Brushed Image View Zoom Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"viewof smoothing","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"viewof regionSelection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"width = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"import { viewof smoothing } from '@jonhelfman/lab-palette-extraction-base'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"import { regions, regionNames, viewof regionSelection } from '@jonhelfman/brushed-image-view-example-3'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"