Published
Edited
Jan 9, 2022
import {imageInput} from "@mbostock/file-input"
viewof image = imageInput({
crossOrigin: "anonymous",
initialUrl: testImage(4000, 5000)
})
function testImage(widthPx, heightPx) {
var canvas = document.createElement('canvas');
canvas.width = widthPx;
canvas.height = heightPx;
let ctx = canvas.getContext('2d');
ctx.fillStyle = "#ff0";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#555";
let stripe = 1000;
for (let i = 0; i < canvas.width; i += stripe * 2) {
ctx.fillRect(i, 0, stripe, canvas.height);
}
ctx.fillStyle = "#000";
ctx.fillRect(100, 500, canvas.width - 200, 100);
return canvas.toDataURL("image/png");
}
background = "#fafafa"
border = "#fff"
widthPx = 2048
heightPx = widthPx / aspect
paddingPx = 96
borderPx = 16
function drawImage(f) {
var canvas = document.createElement('canvas');
canvas.width = widthPx;
canvas.height = heightPx;
let ctx = canvas.getContext('2d');
ctx.fillStyle = background;
ctx.fillRect(0, 0, canvas.width, canvas.height);
f(ctx)
let result = document.createElement("img");
result.src = canvas.toDataURL("image/png");
return result;
}
md`## Cover Image`
function drawCover(ctx) {
ctx.save();
let imageWidthPx = image.width;
let imageHeightPx = image.height;
let minFrameDimensionPx = Math.min(widthPx - 2 * paddingPx, heightPx - 2 * paddingPx);
let maxImageDimensionPx = Math.max(image.width, image.height);
let scale = 1;
if (maxImageDimensionPx > minFrameDimensionPx) {
scale = minFrameDimensionPx / maxImageDimensionPx;
}
let newWidthPx = imageWidthPx * scale;
let newHeightPx = imageHeightPx * scale;
// drawSquare(ctx);
ctx.fillStyle = '#fff';
ctx.fillRect((widthPx - newWidthPx) / 2 - borderPx, (heightPx - newHeightPx) / 2 - borderPx, newWidthPx + 2* borderPx, newHeightPx + 2 * borderPx);
ctx.drawImage(image, (widthPx - newWidthPx) / 2, (heightPx - newHeightPx) / 2, newWidthPx, newHeightPx);
ctx.restore();
}
drawImage(drawCover)
function createPanes() {
let panes = [];
let imageWidthPx = image.width;
let imageHeightPx = image.height;
let maxFrameDimensionPx = Math.max(widthPx - 2 * paddingPx, heightPx - 2 * paddingPx);
let minImageDimensionPx = Math.min(image.width, image.height);
let scale = maxFrameDimensionPx / minImageDimensionPx;
let newWidthPx = imageWidthPx * scale;
let newHeightPx = imageHeightPx * scale;
console.log(imageHeightPx, scale, newHeightPx);
if (imageWidthPx >= imageHeightPx) {
let count = Math.ceil((newWidthPx + 2 * paddingPx) / widthPx);
let offsetPx = (count * widthPx - newWidthPx) / 2;
for (let i = 0; i < count; i++) {
panes.push(drawImage(function(ctx) {
ctx.fillStyle = border;
ctx.fillRect(offsetPx - i * widthPx - borderPx, paddingPx - borderPx, newWidthPx + 2 * borderPx, newHeightPx + 2 * borderPx);
ctx.drawImage(image, offsetPx - i * widthPx, paddingPx, newWidthPx, newHeightPx);
}))
}
} else {
let count = Math.ceil((newHeightPx + 2 * paddingPx) / widthPx);
console.log(newHeightPx, widthPx);
let offsetPx = (count * widthPx - newHeightPx) / 2;
for (let i = 0; i < count; i++) {
panes.push(drawImage(function(ctx) {
let rotation = - Math.PI / 2;
ctx.rotate(rotation);
ctx.translate(-heightPx, 0);
ctx.fillStyle = border;
ctx.fillRect(paddingPx - borderPx, offsetPx - i * widthPx - borderPx, newWidthPx + 2 * borderPx, newHeightPx + 2 * borderPx);
ctx.drawImage(image, paddingPx, offsetPx - i * widthPx, newWidthPx, newHeightPx);
}))
}
}
return panes;
}
function show(panes) {
let div = document.createElement('div');
for (let pane in panes) {
div.appendChild(panes[pane])
}
return div;
}
show(createPanes())
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.
