保存畫布背景以及畫布內容

Question

我認爲這是一個常見問題，但我似乎無法找到一個簡單的解決方案。我有一個畫布（我實際使用sketch.js，但我不認爲事項）與背景圖像，例如突擊隊員：

我再通Sketch.js允許用戶寫在上面塗鴉：

當正從畫布圖像我只得到它的畫布圖像：

瓦在我真的想要它們（就像它看起來在屏幕上，第二次捕捉上面）。

我已經嘗試合併背景圖片回來沒有成功。最終這個結果被推到S3 - 所以我不想找到一種方法將它推入另一個HTML元素，我更喜歡一起抓取畫布和背景。但如果不可能的話，我會想象會發生某種合併。

HTML：

 <div id="annotationmodal" class="modal"> 
     <div class="annotation-container" id="annotation_{{id}}"> 
      <div class="tools" style="margin-bottom:10px;"> 
      </div> 
      <div class="center"> 
       <canvas id="tools_sketch_inlinephoto" width="{{width}}" height="{{height}}" style="background: url(@Url.Content("~")my/stuff/amazon/{{value}}/redirect) no-repeat center center;"></canvas> 
      </div> 
      <div class="center"> 
       <input type="button" class="btn btn-solid-grey btn-sm" onclick="device.annotationCancel();" value="Cancel" style="margin-right: 15px;" /> 
       <input type="button" class="btn btn-solid-green btn-sm" onclick="device.annotationSave(this, '{{id}}');" value="Save" /> 
      </div> 
     </div> 

的Javascript：

annotationSave: function (element, id) { 
     var fileExtension = "jpg"; 
     var canvas = document.getElementById("tools_sketch_inlinephoto"); 
     var data = canvas.toDataURL(); 
     var key = device.uploadDataUri(fileExtension, "image/" + fileExtension, data); 
     $("#annotationmodal").detach(); 
     if (settings.focusedField) { 
      settings.focusedField.focus(); 
     } 
    } 

是否有一個簡單的方法來做到這一點？請注意，背景圖像正在從S3中拉出來...

Answer 1

我在使用Literally Canvas之前做過類似的操作。你可能遇到了我遇到的同樣的問題。可能有兩個畫布。一個有圖像，一個有你的繪圖。我不確定什麼Literally Canvas用於他們的畫布名稱，所以我使用Javascript選擇了第一個和第二個canvas元素document.getElementsByTagName('canvas')[0]‌

如果使用drawImage，可以將它們疊放在一起，然後合併它們。 640x480是我有的圖像的尺寸。你應該改變這個部分來匹配你的。

var canvas = document.getElementById("tools_sketch_inlinephoto"); 
var context = canvas.getContext('2d'); 

// Flatten the canvas background and effects 
context.drawImage(document.getElementsByTagName('canvas')[0]‌​, 0, 0, 640, 480); 
context.drawImage(document.getElementsByTagName('canvas')[1]‌​, 0, 0, 640, 480); 

var savedImage = new Image(); 
savedImage.src = canvas.toDataURL("image/png");