Published
Edited
Aug 25, 2021
Comments locked
3 stars
Insert cell
Insert cell
Insert cell
carved.context.canvas
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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`
},
})
Insert cell
height = Math.round(width / image.naturalWidth * image.naturalHeight)
Insert cell
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;
}
Insert cell
Insert cell
Insert cell
Insert cell
// 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);
}
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
restoreOriginal(originalRestored, carved.originalColumns, 0, carved.inputEnd);
Insert cell
restoreOriginal(removedRestored, carved.newColumns, carved.inputEnd, width);
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more