javascript - 图片转canvas等比例缩放

Question

我有一张图片转为canvas，怎样让他等比例缩入显示原图??

var canvas = document.createElement('canvas');
                canvas.height = 400;
                canvas.width = 400;
                $(".piclistbox").append("<p class='leftbox'></p>");
                $(".leftbox").html(canvas);
                
            var ctx = canvas.getContext('2d');
            
            var img = new Image();
            img.src = picUrl;//图片url
            img.onload = function(){
                ctx.drawImage(img,0,0);
            }

Answer 1

要保证canvas的css样式的宽高比和canvas渲染内容本身的宽高比是一致的

Answer 2

HTML5 canvas drawImage

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

• img 规定要使用的图像、画布或视频。

• sx 可选。开始剪切的 x 坐标位置。

• sy 可选。开始剪切的 y 坐标位置。

• swidth 可选。被剪切图像的宽度。

• sheight 可选。被剪切图像的高度。

• x 在画布上放置图像的 x 坐标位置。

• y 在画布上放置图像的 y 坐标位置。

• width 可选。要使用的图像的宽度。（伸展或缩小图像）

• height 可选。要使用的图像的高度。（伸展或缩小图像）