擦除圖像畫布上的線條而不影響背景

我在寫一個Web應用程序，我需要註釋圖像。爲此，我使用html5的畫布。感謝網絡，我發現許多類似的代碼。但是在開發代碼後我遇到了問題。擦除圖像畫布上的線條而不影響背景

context.clearRect(pos.x,pos.y,pos.x,pos.y);

這是我用來清除畫布中的代碼的代碼。我期待的代碼是擦除鼠標指針所在的位置。但是，即使鼠標指針在距離該線較近的地方，代碼所做的也是刪除該行。

編輯：我發現擦除的問題。 clearRect（）的語法是

context.clearRect(x,y,width,height);

正如我給pos.x和pos.y作爲寬度和高度分別是擦除的廣大地區。現在我將這兩個值更改爲5,5，並且我可以擦除指針所在的位置。

此外，我需要保存註釋完全註釋後的圖像。我將圖像保持爲畫布的背景。我正在畫布上畫線。點擊查看圖片時，我只能看到線條。請檢查我的代碼告訴我如何執行這兩個操作。這是我的代碼。

<%@ taglib uri="/struts-tags" prefix="s" %> 
<html> 
<head> 
    <title>Success: Upload User Image</title> 
    <style> 
     canvas { background:url("images/<s:property value="userImageFileName"/>") ; 
       background-size: 100% 100%; 
       background-repeat: no-repeat;} 
    </style>  
</head> 

<body> 

    <h2>utStruts2 File Upload Example</h2> 
    <img id="result" src="images/<s:property value="userImageFileName"/>" width="565" height="584" class="annotatable"/> 
    <canvas id="myCanvas" width="565" height="584" style="border:1px solid #d3d3d3;" > 
     Please use a modern browser like Firefox, Chrome, Safari 
    </canvas> 
    <input type="button" value="draw" onClick="draw()"> 
    <input type="button" value="eraser" onClick="erase()"> 

    <canvas id="canvas2" width="565" height="584" hidden="true"></canvas> 
    <script> 
      var canvas = document.getElementById('myCanvas');   
      var coord = document.getElementById('coord'); 
      var context = canvas.getContext('2d'); 

      var canvas2 = document.getElementById('canvas2'); 
      var cantext2 = canvas2.getContext('2d'); 

     function draw(){ 
      mode="draw";  
      operate(mode); 
     } 

     function erase(){ 
      mode="erase"; 
      operate(mode); 
     } 

     function operate(mode) 
     { 
       var mousedown = false; 
       context.strokeStyle = '#0000FF'; 
       context.lineWidth = 5; 

       canvas.onmousedown = function(e) { 
        var pos = fixPosition(e, canvas); 
        mousedown = true; 
        context.beginPath(); 
        context.moveTo(pos.x, pos.y);      
        //return false; 
       }; 

       canvas.onmousemove = function(e) { 
        var pos = fixPosition(e, canvas);     
        if (mousedown) { 
         if(mode=="draw"){ 
          context.lineTo(pos.x, pos.y); 
          context.stroke(); 
         } 
         if(mode=="erase"){ 
          context.clearRect(pos.x,pos.y,pos.x,pos.y); 
          context2.drawImage(canvas, 0, 0); 
          context.clearRect(0, 0, 565, 584); 
          context.drawImage("images/<s:property value="userImageFileName"/>", 0, 0); 
          context.drawImage(canvas2, 0, 0); 
         } 
        } 
       }; 

       canvas.onmouseup = function(e) { 
        mousedown = false; 
       }; 

       function fixPosition(e, gCanvasElement) { 
        var x; 
        var y; 

        x = e.pageX; 
        y = e.pageY; 

        x -= gCanvasElement.offsetLeft; 
        y -= gCanvasElement.offsetTop; 

        return {x:x, y:y}; 
       } 
     } 
    </script> 
</body> 
</html>

來源

2014-10-12 Pawan

clearRect接受以下參數：(xpos, ypos, width, height)

問題（S）：
在你canvas.onmousemove功能（在模式「擦除」），你必須：context.clearRect(pos.x,pos.y,pos.x,pos.y);

嗯，可以對不對..

然後，根據您的鼠標擦除區域大小後位置，則所述的context剩餘複製到一些緩衝帆布context2：context2.drawImage(canvas, 0, 0);

這之後清除整個繪圖畫布：context.clearRect(0, 0, 565, 584);

向（S）：
一旦固定在上述（以便鼠標指針作爲橡皮擦使用）要添加一個函數來組合/導出/存儲註釋的圖像：

使用緩衝區context2首先繪製您的（原始）圖像，然後在其上畫你的安otation圖像（都使用drawImage()）（想想圖層）。

最後使用.toDataURL()方法以輸出合成圖像從context2緩衝液（和發送關閉使用AJAX等的結果（base64編碼的數據的URL是一個簡單的字符串））。

另外：

你可能想知道你並不需要標記您的緩衝區，只是在內存中創建它： var canvas2=document.createElement('canvas');
您的VAR mode是泄漏到全球（我會只需發行operate('draw')等，並保存減少的操作，以獲得更好的用戶體驗響應能力（'做更少的工作'））。

來源

2014-10-12 05:02:31 GitaarLAB

擦除圖像畫布上的線條而不影響背景

回答

相關問題