canvas生成图片只有96dpi,打印需要300dpi, 请问如何修改这个信息.

Question

canvas生成图片只有96dpi,打印需要300dpi, 请问如何修改这个信息.

Answer 1

不知道这个是不是你需要的
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio

<canvas id="canvas"></canvas>

<script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      // Set display size (css pixels).
      var size = 300;
      canvas.style.width = size + "px";
      canvas.style.height = size + "px";

      // Set actual size in memory (scaled to account for extra pixel density).
      var scale = 3.125; // 300/96
      canvas.width = Math.floor(size * scale);
      canvas.height = Math.floor(size * scale);

      // Normalize coordinate system to use css pixels.
      ctx.scale(scale, scale);

      ctx.fillStyle = "#bada55";
      ctx.fillRect(10, 10, 300, 300);
      ctx.fillStyle = "#ffffff";
      ctx.font = "18px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";

      var x = size / 2;
      var y = size / 2;

      var textString = "I love MDN";
      ctx.fillText(textString, x, y);
    </script>

Answer 2

其实这个DPI一般只是在扫描或者打印输出时才有效，是一个相对值，甚至可以强制设置，这时一幅有固定像素分辨率的图片在不同的DPI打印时，DPI越高，打印出的真实尺寸就越小而已。

大多数图像存储格式也是不存储DPI的，存储DPI信息的好像主要是一些位图格式图像，比如JPG、PNG等。

不知道你的Canvas是如何保存到图像文件的，因为默认Canvas标签通过 toDataURL()方法保存为图像时只有96dpi这一个固定的值，且官方方法设置中也没有可以修改的地方，只能保存之后用其它方法才能修改这个值，不过如果之前Canvas中的有效像素数量没有进行合理的缩放，则这个值修改会造成打印图片的减小（修改方法就是前面 林枫 提到的方法）

此外可以参考 https://github.com/shutterstock/changeDPI上的修改DPI方法直接对相应数据进行处理

Answer 3

试试缩放canvas呢？画布的宽和高等比例放大

scale
https://developer.mozilla.org...

Answer 4

参考
https://stackoverflow.com/que...