imgData = function(imgcanvas) {
/*var offscreenCanvas = document.createElement("canvas");
offscreenCanvas.width = imgcanvas.width || imgcanvas.naturalWidth;
offscreenCanvas.height = imgcanvas.height || imgcanvas.naturalHeight;
var ctxOff = offscreenCanvas.getContext("2d");*/
//var canvas = new OffscreenCanvas(imgcanvas.width, imgcanvas.height);
//var context = canvas.getContext('2d');
const context = DOM.context2d(imgcanvas.width, imgcanvas.height, 1);
context.drawImage(imgcanvas, 0, 0);
//ctxOff.drawImage(imgcanvas,0,0);
return context.getImageData(0,0, imgcanvas.width, imgcanvas.height);
}
imgDataMargin = function(imgcanvas, margin) {
let w = imgcanvas.width+(2*margin);
let h = imgcanvas.height+(2*margin);
//var canvas = new OffscreenCanvas(w, h);
//var context = canvas.getContext('2d');
const context = DOM.context2d(w, h, 1);
context.drawImage(imgcanvas, margin, margin);
return context.getImageData(0,0, w, h);
}
imgInvData = function(imgcanvas) {
//var canvas = new OffscreenCanvas(imgcanvas.width+2, imgcanvas.height+2);
//var context = canvas.getContext('2d');
const context = DOM.context2d(imgcanvas.width+2, imgcanvas.height+2, 1);
context.drawImage(imgcanvas, 1, 1);
let imageData = context.getImageData(0,0, imgcanvas.width+2, imgcanvas.height+2);
let data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
if (data[i+3] < 20) {
data[i+3] = 255
} else {
data[i+3] = 0;
}
}
return imageData;
}
html`<style> p { max-width: none; }</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
