JSFiddle - React, Tailwind, and code Playground
HTML
<img src="http://selenit.freeoda.com/experiments/SVG/tiger.svg" id="orig">
<p id="size"></p>
CSS
img {
width: 950px;
height: 950px;
display: block;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
}
JavaScript
window.onload = function() {
var origImg = new Image();
origImg.src = document.getElementById('orig').src;
origImg.onload = function(){
var copy = document.createElement('canvas');
copy.width = this.width;
copy.height = this.height;
document.getElementById('size').innerHTML = 'Размеры: '+ copy.width +'×'+ copy.height;
var draw = copy.getContext("2d");
try {
draw.drawImage(origImg, 0, 0, 900, 900, 0, 0, origImg.width, origImg.height);
}
catch(ex) {
alert(ex.message)
}
document.body.appendChild(copy);
}
}