Question

我使用以下javascript将图像绘制到画布上。

var canvas = document.getElementById('canvasId');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function () {
    ctx.drawImage(img, 0, 0,imgWidth,imgHeight);
}

img.src = "images/testimg.jpg";

当我这样做时，我只看到原始图像的一部分。任何人都可以解释如何在画布上绘制整个原始图像，最好不指定原始照片的尺寸。

Answer 1

将画布高度和宽度设置为图像的高度和宽度。

var canvas = document.getElementById('canvasId');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');


    canvas.height = ImgHeight;
    canvas.width = ImgWidth;


img.onload = function () {
    ctx.drawImage(img, 0, 0,imgWidth,imgHeight);
}

img.src = "images/testimg.jpg";

Answer 2

这是@Ctrl Alt Design的答案的替代方案，它会调整画布的大小以适合图像。

此示例缩放图像以适合画布，同时保持图像的宽高比：

var img=new Image();
img.onload=start;
img.src="images/testimg.jpg";
function start(){

    // calculate the scaling factor necessary
    // to fit the image in the exsiting canvas size
    // while maintaining the image's aspect ratio

    var scaleFactor=Math.min((canvas.width/img.width),(canvas.height/img.height));

    ctx.drawImage(img,0,0,img.width*scaleFactor,img.height*scaleFactor);

}

自动缩放画布以绘制图像

2 个答案: