以正确的尺寸打印 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 的相关文章

  • Prettier vscode 扩展不支持 Django 模板标签 {% tag %}

    Prettier Visual Studio 代码扩展不支持 Django 模板标签 tag 现在我该如何解决这个问题 我是否必须禁用 html 文件的 Prettier 扩展 或者还有其他解决方案吗 github 中的问题 5581 不支
  • 以编程方式更改 StackPanel 在 Canvas 上的位置

    我在画布上有堆栈面板 堆栈面板有
  • 在 HTML 中,

    应该以哪种方式嵌套?

    是否有更正确的嵌套顺序 a and h1 HTML 中的元素 e g a href www example com h1 Example h1 a or h1 a href www example com Example a h1 在 HT

  • Socket.io 如何判断某人何时离开

    我正在使用 socket io 创建一个实时游戏 目前 当有人离开时 什么也不会发生 我想以某种方式通知服务器说谁离开了 有没有办法在用户离开时发出正确的信息 我可以让服务器每 1000 毫秒对每个人执行一次 ping 操作 或者通过其他方
  • 当 div 移动以填充其他淡出的 div 留下的空白空间时,如何为它们设置动画

    我有一组div 每个div对应一组类别 当我单击过滤器时 这将更改 div 的类 并根据这些类别使它们可见或隐藏 我控制 div 淡入 淡出的方式 它们做得缓慢而漂亮 但每次 div 消失时 保持不变的 div 会突然移动以填充隐藏的 di
  • 使用 python 将 bibtex 文件转换为 html (也许是 pybtex?)

    您好 我想解析 bibtex 出版物文件并对特定字段 例如年份 进行排序并过滤某些内容 然后将其放在网站上 我遇到了 pybtex 它可以读取和解析 bibtex 文件 但它基本上没有记录 我不知道如何对条目进行排序 pybtex 是可行的
  • 如何使两个
    ...
    位于同一行?

    我的意思是 两个标签具有相同的高度 对所有 div 尝试这个 display inline block
  • 使用他们的 API 创建一个基本的 MailChimp 注册表单

    我是 MailChimp 的新手 需要一些帮助 通过他们的基本时事通讯注册表单 您只需将一些预先打包的 HTML 嵌入到您的页面中即可 然而 这样做的问题是 单击 提交 会重定向到 MailChimp 页面 我不想重定向到 MailChim
  • html 元视口标签

    我建立了一个html登陆页面 你可以看到它here http tzabar exactive co il 我以这种方式使用元视口标签 当我从手机进入这个页面时 页面宽度不适合屏幕 iPhone 示例 http mobiletest me i
  • :目标选择器不适用于选项标签

    我试图在这里帮助一位 StackOverflow 成员 我发现 CSS target选择器不适用于选项标签 我创建了一个示例来说明使用w3schools 教程 http www w3schools com cssref tryit asp
  • 保留以下文本的标题

    我正在使用 css 列计数功能将我的部分分成两列 在一个页面上 我在第一列的底部有一个 h3 标题 在下一列的顶部有一个 p 段落 我想保留该段落的前几句话的标题 我可以将其与整个段落一起包装在使用 inline block 样式的 div
  • 使 html svg 对象也成为可点击的链接(在 iPhone 上)

    这个问题与使 html svg 对象也成为可点击的链接 https stackoverflow com q 11374059 4825796 但给出的答案似乎不适用于 iPhone ios 9 3 safari 和 chrome 浏览器 我
  • HTML Mobile - 强制软键盘隐藏[重复]

    这个问题在这里已经有答案了 我正在为一家优惠券公司开发前端网站 我有一个页面 用户只需输入电话号码和花费的美元 我们想出了一个有趣的内置 Javascript 屏幕键盘 它易于使用且快速 但是 我正在寻找一种解决方案 以在用户聚焦并在这些字
  • Rails:使用水豚填充动态字段

    我有一个通过 javascript 动态创建的带有长 id 的文本字段 user user skills attributes 69878013874980 skill title 哪里的69878013874980是生成的时间戳 如何在水
  • 在跨开口的 Bootstrap 弹出窗口中保留复选框

    我在引导弹出窗口内有复选框 我将其用作表单的一部分 当用户打开弹出窗口 选择一些复选框 关闭弹出窗口 然后重新打开弹出窗口时 我遇到问题 新打开的弹出窗口不会显示用户上次打开弹出窗口时选中的框 我需要用户的选择在弹出窗口启动时保持不变 我猜
  • CSS 样式在部分回发时停止工作

    在 ASP net C 应用程序中 我有一个带有自定义 css 的复选框 CSS 文件是 复选框
  • jquery无法获取data属性值

    我正在尝试在 jQuery 中设置一个变量 该值应该在按钮的单击事件上设置 onclick 事件触发 但 x10Device 变量仍然存在undefined 我使用的是jquery 1 7 1 jQuery x10Device this d
  • 如何按时间间隔翻转div

    您好 请看这个脚本并告诉我如何按时间间隔翻转 A B 和 C div 我希望A先翻转然后停止 B接下来翻转并停止 然后C然后再次回到A B和C 就像循环一样 然后重新开始 这在 CSS3 中可能吗 在此代码中 所有 div 同时翻转 HOL
  • 如何将本地文本文件上传到文本区域(网页内)

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一
  • html中锚标记中href和data-href的区别

    html中的href和data href属性有什么区别 a a 标签 我当前的代码写如下 a href verify phone process 1 html class btn btn default bubbla btn Sign In

随机推荐