javascript - 将 html 缩放为图像

我正在尝试开发一个编辑器来编写文本，输出为 html 并将其打印在明信片上。

我正在开发一个预览来检查打印前的渲染效果。例如附上我的明信片布局

因为这是真正的明信片，所以我所有的风格都是厘米而不是像素（我知道它们很容易转换），但这不是主要问题。

假设我的明信片的可写内容是 6 x 9 厘米，全尺寸是 11 x 16 厘米

目前我有 html 中的所有内容，没有背景图片，但这在移动设备上太可怕了，因为太大了，我必须设置一些溢出，这不是用户友好的。

首先，我的想法是使用画布创建预览，然后生成会自动缩放的图像，但画布文本似乎不接受 html。

另一种解决方案是在 css 中使用比例变换，获取真实模板图像大小和实际模板图像大小之间的比例，然后使用 javascript 调整它。这可以工作，但不是很干净

如果您看到其他选择，请告诉我

标签： javascripthtmlcss

我能理解的是，您想设置页面样式以将其打印在明信片中。这可以通过 css 完成：

在您的 CSS 文件中，您可以定义与打印相关的样式，如下所示。

@Media Print 
{
//your print related styles goes here
}