以正确的尺寸打印 HTML5 Canvas

2023-12-21

是否有正确的方法来指定画布元素的尺寸(例如以毫米为单位),以便如果我将其打印出来它将具有正确的尺寸?

我试过这个简单的例子:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
style="border:1px solid #c3c3c3; width:50mm; height:50mm;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

但在屏幕上画布是 45 毫米而不是 50 毫米,打印时是 55 毫米^^


第 1 部分:生成 50 毫米的打印绘图需要多少画布像素?

打印机通常以每英寸 300 像素进行打印。

以毫米为单位:300ppi / 25.4 毫米英寸 = 每毫米 11.81 像素。

因此,如果您想打印 50 毫米的绘图,您将计算所需的像素大小,如下所示:

50mm x 11.81ppm = 590.5 像素(591 像素)

然后将画布大小调整为 591 像素(假设为正方形),如下所示:

// resize the canvas to have enough pixels to print 50mm drawing
c.width=591;
c.height=591;

第 2 部分:将画布导出为图像

要打印画布,您需要将画布转换为可以使用的图像context.toDataURL.

// create an image from the canvas
var img50mm=new Image();
img50mm.src=canvas.toDataURL();

第 3 部分:将导出的图像转换为正确的打印分辨率

context.toDataURL始终创建每英寸 72 像素的图像。

打印机通常以更高分辨率打印,可能每英寸 300 像素。

因此,为了使导出的图像能够在页面上正确打印,必须将导出的图像从 72ppi 转换为 300ppi。

The 图像魔术师库可以进行转换:http://www.imagemagick.org/ http://www.imagemagick.org/

它是一个服务器端工具,因此您必须将导出的图像从服务器上退回(可能使用 AJAX 来回传送图像)。

ImageMagick 适用于 PHP、IIS 和其他服务器环境。

下面是一个使用 PHP 转换图像分辨率并将转换后的图像回显给调用者的示例:

// Assume you've uploaded the exported image to
// "uploadedImage.png" on the server
<?php
  $magic = new Imagick();
  $magic->setImageUnits(imagick::RESOLUTION_PIXELSPERINCH);
  $im->setImageResolution(300,300);
  $im->readImage("uploadedImage.png");
  $im->setImageFormat("png");
  header("Content-Type: image/png");
  echo $im;
?>

最后一部分:打印出来!

您从服务器收到的转换后的文件将在 300ppi 打印机上打印 50 毫米方形图像。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

以正确的尺寸打印 HTML5 Canvas 的相关文章

  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • 如何计算android中位图擦除区域的百分比?

    我是安卓新手 我正在制作一个可以使用手指擦除画布上的位图的应用程序 像手指画橡皮擦之类的东西 我想计算擦除区域的百分比 例如 60 已从完整图像中擦除 请帮助我做到这一点 提前致谢 我尝试了一些方法 它总是给我 0 它不起作用 请参阅该方法
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • 通过 Javascript 将图像切割成碎片

    我正在创建一个简单的拼图游戏 为了做到这一点 我需要将我正在使用的图片切成 20 块 Javascript 有没有办法将一张图片切成 20 个相等的部分 并将它们保存为网页中的 20 个不同的对象 或者我只需要进入 Photoshop 自己
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • 如何使 Edittext 大小保持不变?安卓

    我知道使 Edittext 左侧的文本 消失 以保持单行的属性 singleLine true 但我的问题是 当我在显示视图之前填充编辑文本时 在这种情况下 我的编辑文本都超出了屏幕 有任何想法吗 谢谢 这是填充空的 Edittext 时得
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示
  • 如何设置视频文件的预览,从输入类型='文件'中选择

    在我的模块之一中 我需要从 input type file 浏览视频 之后我需要在开始上传之前显示选定的视频 我使用基本的 HTML 标签来显示 但它不起作用 这是代码 document on change file multi video
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 如何使自定义 Web 组件可聚焦?

    我正在写一个自定义网络组件 https github com denilsonsa html5 knob这意味着是互动的 我如何告诉浏览器这个自定义组件应该获得焦点 我希望我的自定义元素 可以聚焦 通过选项卡导航 集中注意力时可以接收按键信
  • WebGL VS Canvas 2D 硬件加速

    这些天 我需要在画布上画很多图像 画布尺寸为800x600px 我有很多256x256px的图像 有些更小 在上面绘制 这些小图像将在画布上组成一个完整的图像 我有两种方法来实现这一点 首先 如果我使用canvas 2D上下文 那就是con
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • 无法使用 BeautifulSoup4 (Python 3) 抓取特定表

    我想从 Ligue 1 足球网站上抓取一张表格 具体来说 该表包含有关卡片和裁判的信息 http www ligue1 com LFPStats stats arbitre competition D1 http www ligue1 co
  • HTML W3C 有效元素 - DIV 在 TD 内有效吗?

    我正在和一位同事争论 但找不到证据证明我们俩都是对的 我之前已经看过给定标签的有效元素列表 但只是无法再次找到它 有人能指出我正确的方向吗 我对 XHTML 很好奇 但分歧具体在于 DIV 标签在 HTML 4 01 中的 TD 标签内是否
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小

随机推荐