30:T564,histogram = { let context, canvas, r, g, b, max = 0, height = 256; if (this) { canvas = this; context = canvas.getContext("2d"); context.clearRect(0, 0, 256, height); r = canvas._r.fill(0); g = canvas._g.fill(0); b = canvas._b.fill(0); } else { context = DOM.context2d(256, height, 1); context.globalCompositeOperation = "screen"; canvas = context.canvas; canvas.style.background = "#333"; canvas.style.width = "100%"; canvas.style.height = `${height}px`; canvas.style.imageRendering = "pixelated"; canvas._r = r = new Uint32Array(256); canvas._g = g = new Uint32Array(256); canvas._b = b = new Uint32Array(256); } for (let i = 0, n = imageData.width * imageData.height << 2; i < n; i += 4) { max = Math.max(max, ++r[imageData.data[i + 0]], ++g[imageData.data[i + 1]], ++b[imageData.data[i + 2]] ); } context.fillStyle = "#ff0000"; for (let i = 0, v; i < 256; ++i) { let v = r[i] / max * height; context.fillRect(i, height - v, 1, v); } context.fillStyle = "#00ff00"; for (let i = 0; i < 256; ++i) { let v = g[i] / max * height; context.fillRect(i, height - v, 1, v); } context.fillStyle = "#0000ff"; for (let i = 0; i < 256; ++i) { let v = b[i] / max * height; context.fillRect(i, height - v, 1, v); } return canvas; }31:T441,md`## Implementation Notes The *image* cell is defined as a generator. This cell either yields one HTMLImageElement, or it continuously yields an HTMLVideoElement, depending on whether the *camera* checkbox is checked. The *imageData* cell generates the ImageData from the image or video element whenever the *image* cell yields a value. (The *imageData* uses its [this value](/@tmcw/untitled/5) to reuse its canvas element across evaluations, but you can omit this step if performance is less of a concern.) Thus, if a static image is used, *imageData* is computed once; however, if the camera is used, then *imageData* is likewise recomputed continuously. When a static image is used, we yield a promise to the image, rather than the image directly; this way, the image data is only computed after the image loads. Similarly, when using the camera, we first yield a promise to the video. After the video loads, a loop yields the video element continuously. The [invalidation promise](/@mbostock/disposing-content) is also used to dispose the video stream when it is no longer needed.`32:[] 2e:{"title":"Camera Histogram","cells":[{"id":0,"value":"md`# Camera Histogram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"md`Above is an RGB histogram of the image below, which defaults to a picture of a cat. If you click the checkbox, it will switch to a live histogram of your camera. Or you can edit the image URL below to choose a different image.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"viewof camera = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof url = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"image = {\n if (camera) {\n const stream = navigator.mediaDevices\n ? navigator.mediaDevices.getUserMedia({video: true})\n : new Promise((y, n) => navigator.getUserMedia({video: true}, y, n));\n const video = html`

`;\n video.style.maxWidth = \"100%\";\n yield stream.then(stream => {\n if (\"srcObject\" in video) video.srcObject = stream;\n else video.src = URL.createObjectURL(stream);\n invalidation.then(() => {\n stream.getTracks().forEach(t => t.stop());\n URL.revokeObjectURL(video.src);\n });\n return video;\n });\n while (true) {\n yield video;\n }\n } else {\n yield new Promise((resolve, reject) => {\n const image = new Image;\n image.onload = () => resolve(image);\n image.onerror = reject;\n image.crossOrigin = \"anonymous\";\n image.src = url;\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"imageData = {\n const width = 224, height = 224;\n const context = this ? this.context : DOM.context2d(width, height, 1);\n context.drawImage(image, 0, 0, width, height);\n const data = context.getImageData(0, 0, width, height);\n data.context = context;\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}