我有一张图片转为canvas,怎样让他等比例缩入显示原图??
var canvas = document.createElement('canvas');
canvas.height = 400;
canvas.width = 400;
$(".piclistbox").append("<div class='leftbox'></div>");
$(".leftbox").html(canvas);
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = picUrl;//图片url
img.onload = function(){
ctx.drawImage(img,0,0);
}
要保证canvas的css样式的宽高比和canvas渲染内容本身的宽高比是一致的
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 可选。要使用的图像的高度。(伸展或缩小图像)