Published
Edited
Aug 25, 2021
Comments locked
3 stars
carved.context.canvas
images = ({
"De Stellingwerven": {
image: await FileAttachment("hurb 6.jpg").image(),
credit: md`*Photo Credit:* Job van der Zwan (me)`
},
"Blue Beach Surf": {
image: await FileAttachment("blue.jpg").image(),
credit: md`*Photo Credit:* [Blue Beach Surf](https://pixabay.com/photos/blue-beach-surf-travel-surfer-4145659/) by [Kiril Dobrev](https://pixabay.com/users/kirildobrev-12266114/)`
},
"North Windows Arch": {
image: await FileAttachment("North Windows Arch.jpg").image(),
credit: md`*Photo Credit:* [North Windows Arch, Arches National Park - 9/24/2007](https://flic.kr/p/4hxxz50) by
Mike Goad`
},
})
height = Math.round(width / image.naturalWidth * image.naturalHeight)
function createContext(img) {
Math.round(width / img.naturalWidth * img.naturalHeight)
const context = DOM.context2d(width, height, 1);
context.canvas.style = "max-width: 100%;";
context.drawImage(img, 0, 0, width, height);
return context;
}
// Restores (an approximation of) the original image from either the retargeted pixels or the discarded seams
function restoreOriginal(targetImage, columns, colStart, colEnd) {
const {inputData32, inputEnd} = carved;
const {context, output32, output} = targetImage;
for (let y = 0; y < height; y++) {
const line = y * width;
let x = 0;
for (let i = colStart; i < colEnd; i++) {
const xEnd = columns[i + line];
const rgba = inputData32[i + line];
while(x < xEnd) {
output32[x + line] = rgba;
x++;
}
}
const rgba = inputData32[inputEnd + line];
while (x < width) {
output32[x + line] = rgba;
x++;
}
}
context.putImageData(output, 0, 0);
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
restoreOriginal(originalRestored, carved.originalColumns, 0, carved.inputEnd);
restoreOriginal(removedRestored, carved.newColumns, carved.inputEnd, width);
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.
