2

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

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

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

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

意思是，我希望它最终没有圆角，没有背景图像。画布是使用织物框架完成的。我的想法是将所有元素添加到画布中，除了背景图像，然后从那里渲染 PDF。有什么指导方针吗？这是要走的路吗？

4

1 回答 1

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);

打印时，您使用隐藏的画布，它没有背景图像，也没有剪角。

于 2012-11-16T21:21:35.860 回答