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

基本上，我正在尝试将url或Base64代码加载到临时画布中。这个画布我试图用给定的目标宽度和高度在另一个画布上绘制，但结果是图像失真

---

canvas.drawImage

的第一个调用失真，第二个调用很好。如前所述，正确的语法是

ctx.drawImage（image，dx，dy，dWidth，dHeight）

所以我真的不明白出了什么问题。

当您使用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);

---

您的代码中有一个导致问题的bug

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

修正后，您将能够看到正确的纵横比

---

这里是工作链接

@11thdimension，因为您在绘制图像时在其中一个中设置了大小，而在绘制图像时只需设置绘制位置而不是大小

ctx.drawImage（img，x，y）

不指定绘制图像的大小，

ctx.drawImage（img，x，y，width，height）

指定大小，并且在绘制图像时拉伸图像

ctx.drawImage（_img，0，0200200）

，它不是200乘200，而是300乘150200X200应该是一个完美的正方形。问题是它并没有。请看我的答案。@11维图像将是方形的，但图像的内容将不是方形的。当输出到控制台时，请检查图像属性。img的大小为300×150ah，我知道了，因为新创建的画布的尺寸为300x150，并且我将其拉伸到200x200，它会变形。即使是tho

drawImage

也会使用画布

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