Question

我想将我的画布导出到PDF上，只渲染添加到画布中的元素。例如：

我有这个画布，背景图像设置为它。 http://i49.tinypic.com/n7lv.png

这是我将其渲染为PDF时的结果（使用Bytescout库） http://i50.tinypic.com/346ud7m.png

这就是我希望它最终结果如下： http://i50.tinypic.com/2q1s9hv.png

意思是，我希望它最终没有圆角，没有背景图像。画布使用结构框架完成。我的想法是将所有元素添加到画布中，除了背景图像，然后从那里渲染PDF。任何准则？这是要走的路吗？

Answer 1

您只需重绘整个场景，省略不想写入PDF的部分。

如果您不想跟踪要重绘的所有内容，那么创建第二个内存中的画布（document.createElement('canvas')）并对该画布执行每个绘制操作而不是正常的绘制操作，然后绘制用户编辑时将画布画到普通画布上，而不是直接绘制到普通画布上。

旧方式：

// First you round the corners permanently by making a clipping region:
ctx.roundedRect(etc)
ctx.clip();
//then a user draws something onto normal canvas, like an image
ctx.drawImage(myImage, 0, 0);

新方式：

// make a hidden canvas:
var hiddenCanvas = document.createElement('canvas');
var hCtx = hiddenCanvas.getContext('2d');
// First you round the corners permanently by making a clipping region:
ctx.roundedRect(etc)
ctx.clip();
//then a user draws something onto HIDDEN canvas, like an image
// This image never gets its corners cut
hCtx.drawImage(myImage, 0, 0);
// Then you draw the hidden canvas onto your normal one:
ctx.drawImage(hiddenCanvas, 0, 0);

当打印时，你使用隐藏的画布，它没有背景图像，也没有修剪过的角落。

从画布中获取元素

1 个答案: