具有 HTML5 画布的更高 DPI 图形

Higher DPI graphics with HTML5 canvas(具有 HTML5 画布的更高 DPI 图形)

问题描述

在使用 HTML5 画布创建图像时，是否可以设置自定义 DPI/PPI?我知道如何在画布上绘制并将其导出为图像，但如何确保输出图像具有特定的 DPI/PPI.我想使用 SVG 元素在画布上绘制是一种方法，但是当我将整个画布导出为图像时，这不会变平吗?或者计算设备 DPI，然后缩放图像以满足我的 DPI 要求，但这似乎不是正确的解决方案.

Is there a way to set a custom DPI/PPI when creating an image using the HTML5 canvas? I know how can I draw on the canvas and export it as an image, but how can I make sure the output image is of certain DPI/PPI. I guess using SVG elemnts to draw on the canvas is a way, but wouldn't that be flattened out when I export the whole canvas as an image? Or calculating the device DPI and then scaling the image to meet my DPI requirement, but that doesn't seem like the correct solution.

推荐答案

你不能(呃)在任何浏览器中访问当前网页显示的 DPI:

You cannot (ugh) access the DPI of a display of the current web page in any browser:

从 JS/CSS 检测系统 DPI/PPI?

对于打印:您很可能无法使用浏览器标准函数设置导出的 图像(PNG、JPEG)的 DPI.但是，如果您使用纯 Javascript 编码器图像编码器，您可以自由创建任何类型的二进制文件，并手动调整嵌入在二进制文件中的 DPI 值.

For printing: You most likely cannot set the DPI of exported <canvas> image (PNG, JPEG) using browser standard functions. However, if you use a pure Javascript encoder image encoder you are free to create any sort of binary file you wish and manually adjust the DPI value embedded int he binary.

https://gist.github.com/1245476

这篇关于具有 HTML5 画布的更高 DPI 图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！