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厘米（只是为了保持简单），那么像素的宽度和高度将为：

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

在画布上使用此尺寸＆＃39;位图，然后使用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的打印质量（但请记住，上传的小图像在任何情况下都不会提供高质量的打印质量）。

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

Answer 2

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

<!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/

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

2 个答案: