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

【问题标题】：Using drawImage() to output fixed size images on a canvas?使用 drawImage() 在画布上输出固定大小的图像？
【发布时间】：2015-06-06 14:09:42
【问题描述】：

无论源图像大小如何，如何使用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);

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

【问题讨论】：

要填满整个 300 * 300 的区域吗？
这是您的想法吗？ stackoverflow.com/questions/21961839/…（这会填满整个画布，而不仅仅是缩放图像以适应里面..）
@KenFyrstenberg：不完全是。在我的情况下，我允许用户上传图像，然后我将使用上述解决方案来缩放图像并将其绘制到画布上。提交后，我计划生成一个 pdf。我的问题是，如果用户使用移动设备访问网站并上传图像，我如何保持 pdf 上的图像质量？（假设pdf页面宽度为840px，上传图片区域占位符为300px）
@Beki 300x380 像素的画布不允许您这样做。您必须根据 PDF 中的 DPI 设置合适的画布大小，然后使用 CSS 缩小页面中的画布以适应屏幕。我可以做出显示所有这些部分的答案。
@KenFyrstenberg：如果你能做到这一点，那就太棒了！！

标签： javascript html canvas

【解决方案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;

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

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

【讨论】：

【解决方案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/

【讨论】：

谢谢。按照示例如果我更改var width = 200*2; 和var height = 137*2;，为什么图像只显示图像的一半？
@Beki 这是网站的问题。在jsfiddle 上使用相同的代码就可以了。