使用 drawImage() 在 canvas 上输出固定大小的图像?

Using drawImage() to output fixed size images on a canvas?

如何使用 drawImage()300px X 380px canvas 上输出完整尺寸的图像而不考虑源图像的大小?

示例:

1). 如果有 75px X 95px 的图像,我希望能够绘制它以适应 300px X 380px canvas .

2). 如果有 1500px X 1900px 的图像,我希望能够绘制它以适应 300px X 380px canvas .

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

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

您需要调整源图像的大小。您将需要计算图像的目标大小,然后在绘制过程中使用几个额外的参数。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = 188;
      var y = 30;
      var width = 200;
      var height = 137;
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, x, y, width, height);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    </script>
  </body>
</html>

来源:http://www.html5canvastutorials.com/tutorials/html5-canvas-image-size/

缩放图像以适应并不难,只需使用简单的纵横比和尺寸:

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);

保持质量; canvas 的 300x380 在打印时要么显得非常小,要么非常模糊。

target 分辨率中保留数据很重要。为此,请使用目标 DPI(或 PPI)计算大小。您还需要提前知道 300x380 区域代表的尺寸(例如,英寸、厘米、毫米等)。

例如:

如果目标 PDF 的 PPI 为 300,并且 canvas 表示 3 x 3.8 厘米(只是为了简单起见),则以像素为单位的宽度和高度将为:

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

在 canvas' 位图上使用此尺寸,然后使用 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";

您现在可以直接使用 canvas 作为 PDF 的图像源,同时保持 PDF 的打印质量(不过请记住,上传的小图像在任何情况下都不会提供高打印质量)。

当然,先设置 canvas 大小,然后使用顶部的代码绘制图像。