从画布获取元素

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

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

这是我的结果，当我把它渲染成PDF（使用Bytescout库） http://i50.tinypic.com/346ud7m.png

这是我希望它最终成为： http://i50.tinypic.com/2q1s9hv.png

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

来源

2012-11-16 Emil

我使用context.roundRect绕过角落。如果我不绕过角落，它会呈现完美。当我要呈现PDF时，是否可以“倒转”圆角？ – Emil

为什么你不能只跟踪你对画布做的所有事情，然后当你想渲染一个PDF时，只需用任何你不想要的步骤重新渲染画布（背景，圆角等等......））省略。 – hobberwickey

必须有比这更简单的方法。你的意思是我基本上创建了一个新的画布，不要弄弯它的角落等等，那么无论用户在可见的画布上做什么，隐藏的都一样？ – Emil

您只需重绘整个场景，省略不想写入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-16 21:21:35

难道没有更简单的方法吗？整个画布部分是一大堆（自定义文本，图片上传，符号，颜色，模型，外壳等）。 – Emil

从画布获取元素

回答

相关问题