保存編輯它

Question

我想在我的應用程序實現的功能，其中用戶可以利用當前屏幕的快照，並可以將其標註爲（修改/塗鴉/等），並在此之後，可以通過電子郵件將其發送後獲取的截屏。我的應用程序使用phonegap以及iOS支持。但主要是由javascript/jquery組成。

到目前爲止，我能夠做到：

1. 保存當前的HTML畫布（與html2canvas庫的幫助）
2. 允許用戶使用由sketch.js
3. 提供手繪工具，帆布互動將文字註釋添加到用戶定義的位置，並放在畫布上的任意位置
4. 使用手機短信打開新電子郵件彈出框email Composer Plugin

爲了提供交互性感覺對用戶而言，我實現帆布層：

1：第一層將被示出通過html2canvas捕獲實際的快照。爲了在此畫布上顯示我的快照（capturedCanvas），我將畫布的背景圖像設置爲通過庫獲得的圖像。代碼如下：

$('.myClass').html2canvas({ 

       onrendered: function(canvas) { 

        var capturedCanvas = document.getElementById('capturedImageView'); 
        capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')'; 

       } 
     }); 

2和3：它上面的層將取決於所選切換手繪工具或文本工具用戶是否。

一切工作正常，但是當用戶完成與獨立的油畫交互，我需要帶3個畫布成一個圖像，以便它可以連接到電子郵件。 我能夠使用context.drawImage連接第2層和第3層，但不知怎的，我從html2canvas獲得的實際快照不伴隨我的最終圖像。

我最後的快照是這樣的：

請在這個問題上提供洞察力。

Answer 1

是html2canvas快照不出現的原因是由於這樣的：

capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')'; 

當你設置的背景是這樣，你只會影響畫布作爲一個正常的元素，而不是畫布本身的內容。這不會被註冊爲其上的像素的一部分。

你需要做的是從drawImage()的html2canvas結果以及到最後的畫布（例如）：

finalCanvasContext.drawImage(htmlCanvas, 0, 0); 
finalCanvasContext.drawImage(layer1canvas, 0, 0); 
finalCanvasContext.drawImage(layer2canvas, 0, 0); 

或：

$('.myClass').html2canvas({ 

    onrendered: function(canvas) { 

     var capturedCanvas = document.getElementById('capturedImageView'); 
     var ctx = capturedCanvas.getContext('2d'); 
     ctx.drawImage(canvas, 0, 0); 

     //.. continue to allow draw etc. 
    } 
}); 

（我不知道你的其他代碼，因爲你沒有顯示它，所以請根據需要進行調整）。