按比例将图像放入容器中？

不止于此。必须调整图像的大小并绘制到画布上，然后可以使用该功能将画布导出到数据URL。

也许这些链接会有所帮助：

resizing proportionally

drawing to canvas

我认为应该结合使用这些方法。

好像我无法获得没有按比例适合容器的图像而没有拉伸高度或宽度。

严格执行一行代码，我必须在空白的HTML页面上运行？

如果我用

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
    imageObj.src = 'img url snipped';
    imageObj.onload = function() {
        var width = 200;
        var height = imageObj.height * (width/imageObj.width);
        canvas.width=width;
        canvas.height=height;
        context.drawImage(imageObj, 0, 0, width, height);
    };

And remove the bottom:50px; from that css, I get:

If I then right click and "view image" it shows the image in a smaller version without the white space. Saving works too and produces a smaller image. You'll just need that export to png part (and add the image url I snipped). And perhaps fetch the image width from canvas.width instead of the other way around.

Not sure if the fiddle updated, but just in case.

If the container has a different ratio than the image then either the div will have whitespace or the image will be stretched yes. I changed the .one class to a #one id in your example by the way. I pasted the code I had into your fiddle.

如果确实需要完全适合容器，则可以考虑裁剪。但是您不知道重要部分是否被切断。

我从未使用过Canvas，这将更多地是一个实用程序，如果可以使用它，请创建一个容器，将容器设置为所需的大小，将图像放入容器中，运行脚本，获取图像，将其放入容器中。为什么图像不能按比例地适合容器，除非画布可以对图像进行智能插值以使其看起来成正比，否则我不确定画布是否可以解决条纹问题？

[Link]

该图像既不适合容器的宽度也不适合容器的高度，因为在完全融合蓝色容器的同时保持图像的比例，因此除非我缺少某些东西，否则高度或宽度都不会拉伸。 :)

出于好奇...您为什么不仅仅使用CSS来调整图像大小以适合容器？

#myImg { width:auto; max-width:100%; }

You could create/resize it on an HTML canvas and export the canvas to PNG using canvas.toDataURL("image/png").

我想：给定任意宽度（无论是来自div，画布还是在我的示例200中），请按比例调整高度，将其写入相同大小的画布，以便可以将其导出为新尺寸的PNG。

出于好奇...您为什么不仅仅使用CSS来调整图像大小以适合容器？

The image has to be written to canvas if you want to export it to PNG using canvas.toDataURL("image/png"). Can CSS influence an image inside a canvas? Perhaps set the height/width of the image with CSS, then retrieving the width/height to write it on the canvas. But will that work with auto and %? No idea, just pondering as well.

图片不适合容器的宽度或高度

好吧，不，这似乎是您可以做的，将200更改为div的大小。但是，我意识到在我的示例中高度永远不会被调整，所以我又跳了一次。

        var canvas = document.getElementById('myCanvas');
        var container = document.getElementById('one');
        var context = canvas.getContext('2d');
        var imageObj = new Image();
            imageObj.src = 'darth-vader.jpg';
            imageObj.onload = function() {
                var size = fetchSize(imageObj.width,
                                     imageObj.height,
                                     container.offsetWidth,
                                     container.offsetHeight);
                canvas.width=size[0];
                canvas.height=size[1];
                context.drawImage(imageObj, 0, 0, size[0], size[1]);
            };

        function fetchSize(w,h,max_w,max_h){
            var size = [w,h];
            var r;
            if(w > max_w){
                r = max_w / w;
                size[0] = max_w;
                size[1] = h * r;
                h = h * r;
                w = w * r;
            }
            if(h > max_h){
                r = max_h / h;
                size[1] = max_h;
                size[0] = w * r;
            }
            return size;
        }

使用438 x 300的图像，将得到以下结果：

200 x 200格：

400 x 800格：

800 x 200格：

1000 x 600格：

画布的尺寸与图像的尺寸相同，因此导出应仅生成图片。但是我还没有测试过那部分。