使用drawImage()在画布上输出固定大小的图像？

我该如何使用drawImage()在a上输出全尺寸图像300px X 380px画布无论源图像大小如何？

例子：

1).如果有一个图像75px X 95px我希望能够将其绘制以适合300px X 380px帆布。

2).如果有一个图像1500px X 1900px我希望能够将其绘制以适合300px X 380px帆布。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("myPic");
ctx.drawImage(img,10,10);

有哪些选项可以防止任何质量损失？

缩放图像以适应并不难，只需使用简单的宽高比和尺寸即可：

var ratioX = canvas.width / image.naturalWidth;
var ratioY = canvas.height / image.naturalHeight;
var ratio = Math.min(ratioX, ratioY);

ctx.drawImage(image, 0, 0, image.naturalWidth * ratio, image.naturalHeight * ratio);

保持质量； 300x380 的画布在打印时要么显得非常小，要么非常模糊。

将其中的数据保存在target解决。为此，请使用目标 DPI（或更确切地说，PPI）计算大小。您还需要提前知道 300x380 区域代表的尺寸（例如，以英寸、厘米、毫米等为单位）。

例如：

如果目标 PDF 的 PPI 为 300，并且画布表示 3 x 3.8 厘米（只是为了简单起见），则宽度和高度（以像素为单位）将为：

var w = (3 / 2.54) * 300;   // cm -> inch x PPI
var h = (3.8 / 2.54) * 300;

在画布位图上使用此尺寸，然后缩小element使用CSS：

canvas.width = w|0;             // actual bitmap size, |0 cuts fractions
canvas.height = h|0;
canvas.style.width = "300px";   // size in pixel for screen use
canvas.style.height = "380px";

现在，您可以直接使用画布作为 PDF 的图像源，同时保持 PDF 的打印质量（但请记住，上传的小图像在任何情况下都不会提供高打印质量）。

当然，首先设置画布大小，然后使用顶部的代码在图像中绘制。