Published
Edited
Oct 1, 2020
Importers
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
image = await new Promise( (resolve, reject) => {
const img = html`<img width=240 height=160 />`;
img.onload = () => resolve(img);
img.onerror = reject;
img.src = imgSrc
})
Insert cell
intrinsicWidth(image)
Insert cell
intrinsicHeight(image)
Insert cell
image.width
Insert cell
image.height
Insert cell
Insert cell
Insert cell
Insert cell
intrinsicWidth(video)
Insert cell
intrinsicHeight(video)
Insert cell
video.width
Insert cell
video.height
Insert cell
Insert cell
Insert cell
Insert cell
svgEl = html`<svg width="400" height="200"
xmlns="http://www.w3.org/2000/svg">
${svgImage}
<image href="${image.src}" height="200" width="200" transform="translate(200, 0)"/>
</svg>`
Insert cell
svgImageFromRaster = svgEl.children[1]
Insert cell
intrinsicWidth(svgImage)
Insert cell
intrinsicHeight(svgImage)
Insert cell
svgImage.width
Insert cell
svgImage.height
Insert cell
intrinsicWidth(svgImageFromRaster)
Insert cell
intrinsicHeight(svgImageFromRaster)
Insert cell
svgImageFromRaster.width
Insert cell
svgImageFromRaster.height
Insert cell
Insert cell
canvas = {
const ctx = DOM.context2d(200, 200, 1);
ctx.drawImage(svgImage, 0, 0);
return ctx.canvas;
}
Insert cell
intrinsicWidth(canvas)
Insert cell
intrinsicHeight(canvas)
Insert cell
canvas.width
Insert cell
canvas.height
Insert cell
Insert cell
imageBitmap = await createImageBitmap(image, 0, 0, 180, 120)
Insert cell
intrinsicWidth(imageBitmap)
Insert cell
intrinsicHeight(imageBitmap)
Insert cell
imageBitmap.width
Insert cell
imageBitmap.height
Insert cell
Insert cell
// OffscreenCanvas is only implemented in Chrome. I don't test it
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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