@mbostock
Building a better computational medium. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published (unlisted)
Insert cell
Insert cell
Changed in target
-
html` <div class="container"> <div class="rotate_90"> <img src="https://s3.amazonaws.com/c.loud/11-sandisfield/images/downstairs/office/20191004_130006.jpg" id="rotate_90"> </div> </div> `
+
new Promise((resolve, reject) => { const image = new Image; image.onerror = reject; image.onload = () => { const canvas = document.createElement("canvas"); canvas.style.maxWidth = "100%"; canvas.width = image.naturalHeight; canvas.height = image.naturalWidth; const context = canvas.getContext("2d"); context.translate(image.naturalHeight, 0); context.rotate(Math.PI / 2); context.drawImage(image, 0, 0); resolve(canvas); }; image.src = "https://s3.amazonaws.com/c.loud/11-sandisfield/images/downstairs/office/20191004_130006.jpg"; })
Insert cell
Removed in target
{
var id = 'rotate_90';//The ID of the <img> element to rotate
var deg = 90;//The rotation angle, in degrees
document.getElementById(id).style = 'transform: rotate(' + deg + 'deg)';
}
Insert cell