如何在HTML5画布中显示一个指定高度和宽度的图像,但让图像以100%的大小显示?换句话说,保持图像的纵横比大小不变。
树形图像= 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg'
我希望这张树的图片能够以100%的大小出现在可以滚动的区域内。
例如,像蓝色显示的“overflow: scroll”选项。 http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow 图像必须在Javascript中使用源。
Javascript:
这里有一个JSFIDDLE,但图片是谷歌的。正如你所看到的,它明显被调整大小/压缩了。相反,我想让完整尺寸的图像在那里显示,并提供某种滚动选项。
树形图像= 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg'
我希望这张树的图片能够以100%的大小出现在可以滚动的区域内。
例如,像蓝色显示的“overflow: scroll”选项。 http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow 图像必须在Javascript中使用源。
Javascript:
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
ctx.canvas.width = 100; ctx.canvas.height = 100;
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0,100,100);
};
imageObj.src = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg';
Html
<canvas id="my_canvas"></canvas>
这里有一个JSFIDDLE,但图片是谷歌的。正如你所看到的,它明显被调整大小/压缩了。相反,我想让完整尺寸的图像在那里显示,并提供某种滚动选项。
谢谢!
ctx.drawImage(source, sourceX, sourceY, sourceWidth, sourceHeight, destinationX, destinationY, destinationWidth, destinationHeight)
,您可以根据需要调整和裁剪图像大小。如果您真的想要一个滚动条:https://dev59.com/5JXfa4cB1Zd3GeqPemzq#36233727 保持纵横比:http://stackoverflow.com/a/34429774/3702797。祝你好运。 - Kaiido