如何將畫布圖形的保存圖像恢復到新的畫布實例？

我正在使用sketch.js http://intridea.github.io/sketch.js/，以便用戶可以在我的應用程序中創建圖形。一旦他們完成了繪圖，並單擊保存，我轉換使用此功能的拉絲成png圖片：如何將畫布圖形的保存圖像恢復到新的畫布實例？

convertCanvasToImage = (canvas) -> 
    image = new Image() 
    image.src = canvas.toDataURL("image/png") 
    image

然後，我只是追加圖像到DOM。

但是如果用戶想要後來編輯圖紙呢？我如何拍攝該圖像並將其添加到sketch.js使用的畫布中？

我嘗試了以下失敗的結果。當你點擊PNG圖像時，我運行這段代碼試圖將圖像附加到畫布上，但它似乎根本不起作用。畫布處於模式，一旦出現，我運行以下代碼將圖像追加到畫布上，但不顯示圖像。

template.$('#sketchModal').on 'shown.bs.modal', (e) -> 
    c = document.getElementById("sketchPad") 
    ctx = c.getContext("2d") 
    ctx.drawImage(e.target, 0, 0)

來源

2014-08-30 nearpoint

只是將圖像重新繪製回畫布上將不起作用，因爲sketch.js需要知道創建圖像的所有繪圖命令和樣式設置。我快速瀏覽了GitHub上的源代碼，但我沒有看到任何保存/恢復SketchJS繪圖的方法。 :-( – markE 2014-08-31 04:12:59

啊我知道我還沒有找到解決方案/破解 – nearpoint 2014-08-31 17:21:27

對不起，似乎沒有辦法。因爲SketchJS必須重新加載繪圖命令和樣式，我看到的唯一方法是這樣做是爲了保存所有的命令和樣式，然後在你想恢復的時候把它全部加載回去 – markE 2014-08-31 17:36:18

我以前沒有使用過素描JS，但看到這樣的代碼我突然想到一個主意

<div class="tools"> 
    <a href="#tools_sketch" data-tool="marker">Marker</a> 
    <a href="#tools_sketch" data-tool="eraser">Eraser</a> 
</div> 
<canvas id="tools_sketch" width="800" height="300" style="background: url(http://farm1.static.flickr.com/91/239595759_3c3626b24a_b.jpg) no-repeat center center;"></canvas> 
<script type="text/javascript"> 
    $(function() { 
    $('#tools_sketch').sketch({defaultColor: "#ff0"}); 
    }); 
</script>

你不想給圖像添加在畫布上，而是將其添加爲背景。試試吧，請告訴我它是否工作。

來源

2014-08-30 22:01:47 alkis

我考慮過這個，但是並沒有真正實現編輯圖形的能力，你仍然不能刪除因爲它是一個背景圖像，它只是讓你看起來像是在繪製舊圖形的頂部，但是當你將新的畫布轉換成圖像時，它只是ontop層，所以這個解決方案不起作用。我真正想要的是將png轉換回畫布圖形，以便它可以被刪除。 – nearpoint 2014-08-31 00:32:17

當你說你不工作時，控制檯是否有幫助？你有沒有錯誤？ – alkis 2014-08-31 00:36:04

hi nearpoint。我的一個請在這裏查看>> http://stackoverflow.com/questions/17939462/continue-edit-sketching-image-using-sketch-js/32845731#32845731 – tennisBoy 2015-09-29 13:51:52

如何將畫布圖形的保存圖像恢復到新的畫布實例？

回答

相關問題