2b:null 2c:["$","title",null,{"children":"Image Operation in Canvas | Chuncheng | Observable"}] 31:T138f,image2Canvas = (img, width, height) => { let bgCtx = document.getElementById("bgCanvas").getContext("2d"), fgCtx = document.getElementById("fgCanvas").getContext("2d"), fontSize = width / 80, headerComponentsWidth = width * 0.2, headerComponentsHeight = (width * 0.2 * height) / width, data, hist; Object.assign(bgCtx.canvas, { width, height }); Object.assign(fgCtx.canvas, { width, height }); // Draw the background into the canvas bgCtx.drawImage(img, 0, 0, img.width, img.height, 0, 0, width, height); data = bgCtx.getImageData(0, 0, width, height).data; hist = mkHistogram(data); console.log(hist); ((ctx) => { // Draw the south-east water print into the canvas ctx.font = fontSize + "px Monospace"; ctx.textAlign = "right"; ctx.fillStyle = "#FFFA"; ctx.fillText( selectedImage.contents .map((s) => s[0].toUpperCase() + s.slice(1)) .join(" | "), width - fontSize / 2, height - fontSize / 2 ); // Draw the south-west water print into the canvas ctx.font = fontSize + "px Monospace"; ctx.textAlign = "left"; ctx.fillStyle = "#FFFA"; ctx.fillText( selectedImage.url.slice(0, 80) + (selectedImage.url.length > 80 ? "..." : ""), 0 + fontSize / 2, height - fontSize / 2 ); // Draw the histogram { let w = headerComponentsWidth, h = headerComponentsHeight, grad; ctx.save(); ctx.translate(width - w, 0); grad = ctx.createLinearGradient(0, 0, w, 0); grad.addColorStop(0.1, "#FFF5"); grad.addColorStop(1, "#FFFA"); ctx.fillStyle = grad; ctx.fillRect(0, 0, w, h); ctx.beginPath(); ctx.moveTo(0, 0); hist["r"].map((d, i) => ctx.lineTo((i / 255) * w, d * h)); grad = ctx.createLinearGradient(0, 0, w, 0); grad.addColorStop(0, "#000"); grad.addColorStop(1, "#F00"); ctx.strokeStyle = grad; ctx.stroke(); ctx.beginPath(); ctx.moveTo(0, 0); hist["g"].map((d, i) => ctx.lineTo((i / 255) * w, d * h)); grad = ctx.createLinearGradient(0, 0, w, 0); grad.addColorStop(0, "#000"); grad.addColorStop(1, "#0F0"); ctx.strokeStyle = grad; ctx.stroke(); ctx.beginPath(); ctx.moveTo(0, 0); hist["b"].map((d, i) => ctx.lineTo((i / 255) * w, d * h)); grad = ctx.createLinearGradient(0, 0, w, 0); grad.addColorStop(0, "#000"); grad.addColorStop(1, "#00F"); ctx.strokeStyle = grad; ctx.stroke(); ctx.restore(); } })(bgCtx); // OnMouseMove drawing fgCtx.canvas.onmousemove = function (evt) { let { offsetX: x, offsetY: y } = evt, idx = y * width * 4 + x * 4, numbers = data.slice(idx + 0, idx + 4), color = d3.rgb(numbers[0], numbers[1], numbers[2], numbers[3]); // Draw the north-west label ((ctx) => { let w = headerComponentsWidth, h = headerComponentsHeight * 0.6, scaleY = d3.scaleLinear().domain([-1, 3]).range([0, h]).nice(), scale = d3 .scaleLinear() .domain([-1, 255]) .range([0, w - fontSize * 5]); ctx.clearRect(0, 0, width, height); let grad = ctx.createLinearGradient(0, 0, fontSize * 18, 0); grad.addColorStop(0, "#FFFA"); grad.addColorStop(0.9, "#FFF5"); ctx.fillStyle = grad; ctx.fillRect(0, 0, fontSize * 18, h); ctx.font = "bold " + fontSize + "px Monospace"; ctx.textAlign = "left"; ctx.textBaseline = "middle"; ctx.fillStyle = "#FFFA"; ctx.fillStyle = "red"; ctx.fillText("R " + color.r, fontSize, scaleY(0)); ctx.fillRect(fontSize * 5, scaleY(0), scale(color.r), fontSize * 0.2); ctx.fillStyle = "green"; ctx.fillText("G " + color.g, fontSize, scaleY(1)); ctx.fillRect(fontSize * 5, scaleY(1), scale(color.g), fontSize * 0.2); ctx.fillStyle = "blue"; ctx.fillText("B " + color.b, fontSize, scaleY(2)); ctx.fillRect(fontSize * 5, scaleY(2), scale(color.b), fontSize * 0.2); })(fgCtx); // Draw the mouse label ((ctx) => { ctx.strokeStyle = "white"; // Draw the y line ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke(); ctx.font = fontSize + "px Monospace"; ctx.textAlign = "left"; ctx.fillStyle = "#FFFA"; ctx.fillText( [x, parseInt((x / width) * img.width)].join(" "), x + fontSize / 2, fontSize ); // Draw the x line ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke(); ctx.textAlign = "right"; ctx.textBaseline = "bottom"; ctx.fillStyle = "#FFFA"; ctx.fillText( [y, parseInt((y / height) * img.height)].join(" "), width - fontSize / 2, y ); ctx.fillStyle = color; ctx.strokeRect(x - 10, y - 10, 20, 20); ctx.fillRect(x - 10, y - 10, 20, 20); })(fgCtx); }; }32:[] 2f:{"id":"f418fab883d12080","slug":"image-operation-in-canvas","title":"Image Operation in Canvas","thumbnail":"4a6c8ba38eec871b4b34223100db174c76d22270f81e573b16f9ff968f224d7a","access_level":"public","create_time":"$D2024-09-20T01:06:06.324Z","update_time":"$D2024-09-20T09:19:49.659Z","view_time":null,"first_public_time":"$D2024-09-20T08:05:25.892Z","fork":{"id":"7a0980291ec2d753","slug":"interactive-html-canvas","title":"Interactive HTML Canvas","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":515,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"},{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"7a45dd6dd319bddb","slug":"selection","title":"Image Selection","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"title":"Image Operation in Canvas","cells":[{"id":0,"value":"# Image Operation in Canvas\n\n## Move your mouse inside the image area, the pixel info is interactively shown.\n\nThe images are from my image gallery. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"viewof selectedImage = Inputs.select(images, {\n label: \"Select image\",\n value: images[d3.randomInt(images.length)()]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"

Image container

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"{\n let img = new Image();\n\n img.crossOrigin = \"Anonymous\";\n img.src = selectedImage.url;\n\n img.onload = () => {\n console.log(\"loaded\", img);\n let { w, h } = fitImage(img);\n \n image2Canvas(img, w, h);\n };\n\n return;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"fitImage = (img) => {\n let { width: w, height: h } = img,\n height = (h / w) * width;\n\n console.log(\"Fit image size from\", [w, h], \"to\", [width, height]);\n return { w: width, h: height };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"mkHistogram = (data) => {\n let r = [...new Array(255)].map(() => 0),\n g = [...new Array(255)].map(() => 0),\n b = [...new Array(255)].map(() => 0),\n n = data.length / 4;\n\n for (let i = 0; i < data.length; i += 4) {\n r[data[i]] += 1;\n g[data[i + 1]] += 1;\n b[data[i + 2]] += 1;\n }\n\n let m1 = d3.max(r),\n m2 = d3.max(g),\n m3 = d3.max(b),\n m = d3.max([m1, m2, m3]);\n\n return {\n r: r.map((d) => d / m),\n g: g.map((d) => d / m),\n b: b.map((d) => d / m)\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"images","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"import { images } from \"@listenzcc/image-resource\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"