我有一个Canvas元素,它位于一个容器div中。当用户从他的机器上选择一张图片时,应该在canvas上显示此图片。我希望canvas尽可能大,但同时保持图像的纵横比。我不知道图像的比例和容器div的大小,因为这是相对于用户的屏幕/窗口大小的。如果我将max-width和max-height设置为例如100%,则如果所选图像小于容器,则canvas将无法填充容器。如果我设置width和height而不是max-width和max-height,则canvas不会保持纵横比。是否有人有解决方法?
<script>
// Note: this uses jQuery.
// It makes getting/setting the dimensions easier,
// but you can do this with normal JavaScript
var img = $("#img");
var container = $("#container");
var width = img.width();
var height = img.height();
var maxWidth = container.width();
var maxHeight = container.height();
var ratio = maxWidth / width;
if(height * ratio > maxHeight) {
ratio = maxHeight / height;
}
img.width(width * ratio);
img.height(height * ratio);
</script>
希望这能帮到你!
{}
的条件块,这展示了糟糕的风格。你的答案是正确的,只是有点懒散。 - Blindman67width()
是 CSS 值)。 - Kaiido在阅读了您关于视频的澄清之后,请查看以下内容:
https://jsfiddle.net/d0dox9xt/
body {
background: #eee;
}
#container {
margin:0 2% 0 2%;
}
#v {
position:absolute;
top:0;
left:0;
width:100%;
}
document.addEventListener('DOMContentLoaded', function(){
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
}
function draw(v) {
c.drawImage(v, 0, 0);
}
drawImage函数可以接受许多参数。第一个参数是插入媒体,接下来的两个参数是用于定位的。您可以有许多参数来定位和更改高度和宽度。我将它们保持不变,以便遵循CSS规则。
这里是有关在画布中放置图像的更多信息的链接:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage