Question

基本上我试图将url或base64code加载到临时画布中。这个画布我试图在具有给定目标宽度和高度的另一个画布上绘制，但会导致图像失真。

base64img = '/*base64code..*/'
srcToCanvas(base64img, function(img) {
    var _img = img;
    var canvas = document.getElementById("canvas").getContext("2d");
    canvas.drawImage(_img, 0, 0, 200, 200) // comes out distorted
    canvas.drawImage(_img, 200, 0) // works fine
});

function srcToCanvas (src, cb){
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");

    var image = new Image();
    image.onload = function() {
        ctx.drawImage(image, 0, 0);
        cb(canvas);
    };
    image.src = src
};

canvas.drawImage的第一次调用失败了，第二次调用很好。正如MDN所述，正确的语法是ctx.drawImage(image, dx, dy, dWidth, dHeight);所以我真的不明白出了什么问题。

Answer 1

您的代码中存在导致此问题的错误。

cb(canvas);//Should have image passed instead of canvas. Drawimage takes image
//Should be
cb(image);

在纠正之后，您将能够看到正确的宽高比。

这是工作链接https://jsfiddle.net/ge3snodn/4/

Answer 2

使用3参数签名drawImage（image，xPos，yPos）调用drawImage时，图像不会缩放，而5参数签名会缩放图像以适合给定的尺寸。

当您渲染图像时，它不关心画布大小，并会剪切画布外的任何图像。

使用5参数drawImage

绘制图像

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

以特定尺寸保持方面绘制。

ctx.drawImage(img, 0,0, 200,img.height * (200 / img.width));
// or
ctx.drawImage(img, 0,0,img.width * (200 / img.height),200);

在具有给定目标宽度/高度的画布上绘制画布会导致图像失真

2 个答案: