canvasImage = resizeToCanvas(url)
canvasImage3 = resizeToCanvas2(url)
canvasImage1 = resizeToCanvas(url, 4)
canvasImage2 = result && result.completed_at
? resizeToCanvas(result.output)
: ""
canvasImage4 = result && result.completed_at
? resizeToCanvas2(result.output)
: ""
//htl.html`<img src="${result?.output}" style="background: #6d6359; width: ${
// wh_i[0] + "px"
//}; height: ${wh_i[1] + "px"};">`
nx = 2
ny = 1
sidey = wh_i[1]
sidex = wh_i[0]
imageHeight = ny * sidey
imageWidth = nx * sidex
update = imgEl.update(imgid)
spinner2 = html`<div style="
margin-left: 0px;
background-image: url(${spinner.src});
height: ${sidey}px;
width: ${sidex}px;
background-position: center;
opacity: 1;
background-repeat: no-repeat;">
<img src="${canvasImage.toDataURL()}" style="width:${sidex}px; height:${sidey}px; background: #6d6359; opacity: .7;">
</div>`
wh_i[0]
wh_i = wh(url)
async function wh(url, scale = 1) {
let img = new Image();
img.crossOrigin = "*";
img.src = url;
await new Promise((resolve) => img.addEventListener("load", resolve));
let w = img.width;
let h = img.height;
// resize the image appropriately
let f = factorize(w, h, 512);
let sw = Math.floor(f.width * scale);
let sh = Math.floor(f.height * scale);
return [sw, sh];
}
async function resizeToCanvas(url, scale = 1) {
let img = new Image();
img.crossOrigin = "*";
img.src = url;
await new Promise((resolve) => img.addEventListener("load", resolve));
let w = img.width;
let h = img.height;
// resize the image appropriately
let f = factorize(w, h, 512);
let sw = Math.floor(f.width * scale);
let sh = Math.floor(f.height * scale);
let sow = Math.floor(w * scale);
let soh = Math.floor(h * scale);
if (toggle4) {
let ctx = DOM.canvas(sw, sh).getContext("2d");
ctx.drawImage(img, 0, 0, sw, sh);
ctx.canvas.originalWidth = img.width;
ctx.canvas.originalHeight = img.height;
return ctx.canvas;
} else {
let ctx = DOM.canvas(sow, soh).getContext("2d");
ctx.drawImage(img, 0, 0, sow, soh);
ctx.canvas.originalWidth = img.width;
ctx.canvas.originalHeight = img.height;
return ctx.canvas;
}
}
async function resizeToCanvas2(url, scale = 1) {
let img = new Image();
img.crossOrigin = "*";
img.src = url;
await new Promise((resolve) => img.addEventListener("load", resolve));
let w = img.width;
let h = img.height;
// resize the image appropriately
let f = factorize(w, h, 512);
let sw = Math.floor(f.width * scale);
let sh = Math.floor(f.height * scale);
let ctx = DOM.canvas(sw, sh).getContext("2d");
ctx.drawImage(img, 0, 0, sw, sh);
ctx.canvas.originalWidth = img.width;
ctx.canvas.originalHeight = img.height;
return ctx.canvas;
}
function factorize(w, h, target) {
// target should be power of 2 probably, like 512 or 1024
let factor = target / Math.max(w, h)
factor = Math.ceil(Math.min(w, h) * factor / 64) * 64 / Math.min(w, h)
w = Math.floor((w * factor) / 64) * 64
h = Math.floor((h * factor) / 64) * 64
return { width: w , height: h }
}
f = factorize(sampleWidth, sampleHeight, factor)
cf = factorize(canvasImage.originalWidth, canvasImage.originalHeight, factor)
import { loading as spinner } from "@cadasa/voice-to-text-image"
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
import { list } from "@stwind/input-list"
import { columns } from "@bcardiff/observable-columns"
import { imageInput } from "@mbostock/file-input"
import { Scrubber } from "@mbostock/scrubber"
map2 = {
style;
const container = DOM.element("div", {
style: `width:620px;height:${sidey}px`
});
var viewer = OpenSeadragon({
element: container,
//showNavigator: true,
visibilityRatio: 1.0,
constrainDuringPan: true,
prefixUrl: "http://openseadragon.github.io/openseadragon/images/",
defaultZoomLevel: 1,
maxZoomLevel: 10,
minZoomLevel: 1,
tileSources: {
type: "image",
url: khanh.src
}
});
/*const anno = Annotorious(viewer, {
readOnly: true
});
anno.setAnnotations(annotations);
TooltipPlugin(anno);
container.anno = anno;*/
//var overlay = viewer.htmlOverlay();
//var imageOverlay = document.querySelector(".slider-relative-size");
//viewer.innerHTML = slider2;
//var imageOverlay2 = document.querySelector(".slider-relative-size:focus");
//overlay.element().appendChild(imageOverlay2);
/*viewer.addOverlay({
element: slider2,
width: 620,
height: sidey,
px: 0,
py: 0
//location: new OpenSeadragon.Rect(0.33, 0.75, 0.2, 0.25)
});*/
return container;
}
khanh = FileAttachment("khanh2.jpg").image()
remini = FileAttachment("remini.JPG").image()
khanh.width
remini.width
imageUrl = FileAttachment("khanh2.jpg").url()
OpenSeadragon = require("openseadragon")
Annotorious = require("@recogito/annotorious-openseadragon")
data = FileAttachment("mapkurator-10-1.geojson").json()
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.
