Question

我有一个容器div内的Canvas元素。当用户从他的机器中选择图像时，该图像应显示在画布上。我希望画布尽可能大，但同时保持图像的宽高比。我既不知道图像的比例也不知道容器div的大小，因为这与用户的屏幕/窗口大小有关。

如果我将max-width和max-height设置为例如100％，如果所选图像小于容器，则画布将不会填充容器。如果我设置宽度和高度而不是max-width和max-height，画布不会保持纵横比。

有没有人知道如何解决这个问题？

Answer 1

如果您愿意使用JQuery（或常规JavaScript），那么这样的解决方案可能会有效：

<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>

它的作用是找到宽度和高度乘以的比率，无论哪个较小（以便它总是适合窗口）。

更新：在JSFiddle.net上测试过。见here。

我希望这可以帮到你！

Answer 2

在阅读有关视频的说明后，请查看以下内容：

https://jsfiddle.net/d0dox9xt/

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);
}

唯一的技巧是设置宽度：100％;这将保持宽高比。

注意在JS

中

arr=[[],[],[],[],[]]

drawImage函数可以使用许多参数。第一个参数是插入媒体，接下来的两个是用于定位。您可以使用许多参数来定位和更改高度和宽度。我让他们独自一人，所以它会遵循CSS规则。

以下是有关放置在画布上的更多内容的链接：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

CSS：在保持纵横比的同时使Canvas尽可能大

2 个答案: