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

Question

如何使用drawImage()输出全尺寸图像的上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);

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

Answer 1

要缩放图像以适应不是那么难,只需使用简单的宽高比和大小:

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的画布要么在打印时显得非常小,要么非常模糊.

保持目标分辨率中的数据非常重要.为此,请使用目标DPI(或更确切地说,PPI)计算大小.您还需要事先知道300x380区域的大小(例如,以英寸,厘米,毫米等为单位).

例如:

如果目标PDF的PPI为300,并且画布代表3 x 3.8 cm(只是为了保持简单),那么像素的宽度和高度将为:

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

在画布'位图上使用此大小,然后使用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的打印质量(但请记住,上传的小图像在任何情况下都不会提供高打印质量).

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