2d:null 2e:["$","title",null,{"children":"Image or Video with Graphical Overlay | benoit9 | Observable"}] 33:T6de,{ const div = d3.select(DOM.element('div')); let container = div .append('div') .style('position', 'relative') .style('width', `${imgWidth}px`) .style('height', `${imgHeight}px`); // let image = container.append(testimage); // InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('[object HTMLImageElement]') is not a valid name. let image = container.node().appendChild(enableWebcam ? video : testimage); d3.select(image) .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', imgWidth) .attr('height', imgHeight); let canvas = container .append('canvas') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', imgWidth) .attr('height', imgHeight); let svg = container .append('svg') .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('width', imgWidth) .attr('height', imgHeight); // Draw plain SVG Node svg.node().appendChild(starSVG); // Draw SVG using D3 svg .selectAll('circle') .data([0, 100, 200, 300, 400]) .enter() .append('circle') .attr('cx', d => imgWidth - d) .attr('cy', d => d) .attr('r', 10) .attr('fill', 'limegreen'); // Draw on Canvas (from @duncangeere/how-to-use-html5-canvas-part-one) const context = canvas.node().getContext('2d'); context.fillStyle = 'orange'; context.strokeStyle = 'lightblue'; context.lineWidth = 5; context.fillRect(225, 225, 100, 100); // Draw a filled rectangle context.clearRect(245, 245, 60, 60); // Cut out a rectangular chunk from the middle context.strokeRect(250, 250, 50, 50); // Draw an outline inside it return div.node(); }34:[{"id":"f8d592711d5d13cfceccbde07b5b02b6d3690a755457b47814cfd33240e5c37ae61db8d85da7937574190fc5601601db449ddf35efec35cf780b026ab6cbd8fb","href":"https://static.observableusercontent.com/files/f8d592711d5d13cfceccbde07b5b02b6d3690a755457b47814cfd33240e5c37ae61db8d85da7937574190fc5601601db449ddf35efec35cf780b026ab6cbd8fb","name":"neonbrand-FoiZoPtxSyA-unsplash.jpg","type":"image/jpeg","lastModified":1601295329361.712,"size":77308}] 31:{"id":"18938b73f46bef45","slug":"image-or-video-with-graphical-overlay","title":"Image or Video with Graphical Overlay","thumbnail":"5b6809dda64b97a8f17afdc73fec8e6ce50cfee8ce9e6822ed1b5c7faac0ad25","access_level":"public","create_time":"$D2020-09-28T12:10:23.837Z","update_time":"$D2020-09-28T15:33:23.050Z","view_time":null,"first_public_time":"$D2020-09-28T13:52:29.442Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"859bae2de96e5fdc","login":"benoit9","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e4e6da06bdd1b12d73156bfbe32abec4ce31246e2bd7e9df4abf4896a8b8611b","tier":"starter_2024"},"version":204,"publish_version":204,"role":null,"authored":false,"authors":[{"type":"individual","id":"16ef152424d5cecf","login":"benoit9","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e4e6da06bdd1b12d73156bfbe32abec4ce31246e2bd7e9df4abf4896a8b8611b","tier":null}],"members":[{"type":"individual","id":"16ef152424d5cecf","login":"benoit9","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e4e6da06bdd1b12d73156bfbe32abec4ce31246e2bd7e9df4abf4896a8b8611b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Image or Video with Graphical Overlay","cells":[{"id":0,"value":"md`# Image or Video with Graphical Overlay`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof enableWebcam = {\n const check = checkbox({\n options: [{ value: 'on', label: 'Enable webcam' }]\n });\n check.value = false;\n return check;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"// From @uvizlab/d3-tutorial-1-introduction-to-observable\nstarSVG = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"imgHeight = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"imgWidth = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"video = {\n if (enableWebcam) {\n const stream = navigator.mediaDevices\n ? navigator.mediaDevices.getUserMedia({\n video: {\n width: { ideal: imgWidth },\n height: { ideal: imgHeight },\n facingMode: 'environment'\n }\n })\n : new Promise((y, n) => navigator.getUserMedia({ video: true }, y, n));\n const video = html`

`;\n video.style.maxWidth = \"100%\";\n const vid = await 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 video.width = imgWidth;\n video.height = imgHeight;\n return video;\n });\n return vid;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"testimage = {\n const image = new Image();\n image.crossOrigin = \"anonymous\";\n image.src = await FileAttachment(\"neonbrand-FoiZoPtxSyA-unsplash.jpg\").url();\n image.width = imgWidth;\n image.height = imgHeight;\n return image;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`Photo by NeONBRAND on Unsplash`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"import { checkbox, slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"