從畫布獲取元素

我想將我的畫布導出到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

從畫布獲取元素

回答

相關問題