在HTML5畫布中裁剪多個圖像

-1

我正在使用圖像處理的HTML5畫布。在我的畫布上，我有許多圖像。當我想單獨剪輯圖像時。但是當我通過創建一個形狀並使用clip()函數來剪輯一個圖像時，它工作正常。但是當我嘗試使用相同的方法剪輯另一個圖像時，會出現問題。當畫布存儲以前的形狀時，它將與新的形狀連接並相應地剪切第二個圖像。我想破壞以前的形狀。請注意，我無法使用clearRect()來清除畫布，因爲我之前的剪輯圖像在那裏。在HTML5畫布中裁剪多個圖像

請REF的鏈接：

Demo Problem

在鏈接拖動圖像分成預定義畫布層和周圍拖動圖像。如果圖像嘗試走出邊界，您可以清楚地看到圖像被正確剪裁。

現在將另一個圖像拖入另一個框的畫布中。現在你可以看到剪輯不能正常運行。

這裏是我的劇本也做：

JS Script

這裏的jsfiddle鏈接

JSFiddle Link

你能幫我解決這個問題？如果您找到另一種方法來清除以前的形狀將會很有幫助。

在此先感謝。

來源

2014-09-23 Tatha

我想幫忙，但我的AV是說不要去你的鏈接，因爲它們是已知含有病毒，發表您的實例上的jsfiddle – QBM5 2014-09-23 13:51:00

您忘了，你必須在裁剪之前/之後使用保存/恢復？也許你只是不明白，帆布是一個狀態機==你必須自己看帆布的狀態。 – GameAlchemist 2014-09-23 14:20:11

@GameAlchemist。 +1我懷疑你是正確的，Tatha需要保存/恢復。澄清你的觀點：以前的裁剪區域將堅持所有新的圖紙。爲了避免這種持久性，在裁剪之前執行'context.save（）'，然後執行'context。恢復（）'當你完成剪切和繪圖。這樣，您可以爲新圖紙應用新鮮的剪輯。 – markE 2014-09-23 16:40:22

我已經通過自己修復了這個問題。畫布不提供多個圖像剪輯選項。所以如果你想在你的畫布中剪輯多個圖像，你必須使用自己的剪輯功能。只需清除選區外的畫布的clearRect()區域即可。迭代每個圖像的這個過程，你就完成了！

解決方案鏈接：

Solution Demo

JS腳本鏈接：

JS Script

感謝。

來源

2014-09-24 12:58:18 Tatha

我能找到的最佳解決方案是使用隱藏畫布，然後使用putImageData方法將其繪製到主畫布上。

var c = document.getElementById("myCanvas"); 
 
var ctemp = document.getElementById("myCanvasTemp"); 
 

 
var ctx = c.getContext("2d"); 
 
var ctxTemp = ctemp.getContext("2d"); 
 

 
ctxTemp.fillStyle = "red"; 
 
ctxTemp.fillRect(10, 10, 50, 50); 
 

 
ctxTemp.fillStyle = "blue"; 
 
ctxTemp.fillRect(20, 20, 50, 50); 
 

 
function copy() { 
 
    var imgData = ctxTemp.getImageData(10, 20, 50, 10); 
 
    ctx.putImageData(imgData, 10, 10); 
 
}

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 

 
<canvas id="myCanvasTemp" width="300" height="150" style="display:none;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas> 
 

 

 
<br /><br /> 
 
<br /> 
 
<button onclick="copy()">Copy</button>

來源

2017-03-14 20:28:50 tjgersho

在HTML5畫布中裁剪多個圖像

回答

相關問題