Outil de gomme HTML5 Canvas sans overdraw couleur blanche

Question

J'ai canevas. J'ai des outils de peinture au crayon et à la gomme. Comment je peux effacer les dessins sans écraser (overdraw) avec la couleur blanche.

cette gomme à effacer mon code sur le dessin avec la couleur blanche: http://jsfiddle.net/66z12xb0/

je en arrière sauver l'image après le dessin.

<?php 
$images = scandir(ROOT_FS . FINISH_DRAW_PATH, 1); 
$imageData = $GLOBALS['HTTP_RAW_POST_DATA']; 
$filteredData = substr($imageData, strpos($imageData, ",") + 1); 
$unencodedData = base64_decode($filteredData); 

$fileName = "photo.png"; 
$fp = fopen(ROOT_FS . SAVE_DRAW_PATH . $fileName, 'wb'); 
fwrite($fp, $unencodedData); 
fclose($fp); 
?> 

Ouvrir avec fenêtres visionneuse de photos et de voir ce résultat:

foto téléchargement supplémentaire:

$("#upload_foto").click(function() { 
    var data = canvas.toDataURL('image/png'); 
    var ajax = new XMLHttpRequest(); 
    ajax.open('POST', 'backend.php', false); 
    ajax.setRequestHeader('Content-Type', 'application/upload'); 
    ajax.send(data); 
}); 

<button type='button' id='upload_foto'>Upload</button> 

Answer 1

Votre idée d'utiliser la composition pour créer une gomme est une bonne idée.

destination-out supprime les dessins existants lorsqu'un nouveau dessin chevauche les dessins existants.

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var lastX; 
 
var lastY; 
 
var strokeColor="red"; 
 
var strokeWidth=5; 
 
var mouseX; 
 
var mouseY; 
 
var canvasOffset=$("#canvas").offset(); 
 
var offsetX=canvasOffset.left; 
 
var offsetY=canvasOffset.top; 
 
var isMouseDown=false; 
 

 

 
function handleMouseDown(e){ 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    // Put your mousedown stuff here 
 
    lastX=mouseX; 
 
    lastY=mouseY; 
 
    isMouseDown=true; 
 
} 
 

 
function handleMouseUp(e){ 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    // Put your mouseup stuff here 
 
    isMouseDown=false; 
 
} 
 

 
function handleMouseOut(e){ 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    // Put your mouseOut stuff here 
 
    isMouseDown=false; 
 
} 
 

 
function handleMouseMove(e){ 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 

 
    // Put your mousemove stuff here 
 
    if(isMouseDown){ 
 
    ctx.beginPath(); 
 
    if(mode=="pen"){ 
 
     ctx.globalCompositeOperation="source-over"; 
 
     ctx.moveTo(lastX,lastY); 
 
     ctx.lineTo(mouseX,mouseY); 
 
     ctx.stroke();  
 
    }else{ 
 
     ctx.globalCompositeOperation="destination-out"; 
 
     ctx.arc(lastX,lastY,8,0,Math.PI*2,false); 
 
     ctx.fill(); 
 
    } 
 
    lastX=mouseX; 
 
    lastY=mouseY; 
 
    } 
 
} 
 

 
$("#canvas").mousedown(function(e){handleMouseDown(e);}); 
 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 
$("#canvas").mouseup(function(e){handleMouseUp(e);}); 
 
$("#canvas").mouseout(function(e){handleMouseOut(e);}); 
 

 
var mode="pen"; 
 
$("#pen").click(function(){ mode="pen"; }); 
 
$("#eraser").click(function(){ mode="eraser"; });

body{ background-color: ivory; } 
 
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<canvas id="canvas" width=300 height=300></canvas></br> 
 
<button id="pen">Pen</button> 
 
<button id="eraser">Eraser</button>

Answer 2

Si vous voulez effacer la ligne que vous avez deux options:

1. utilisez ctx.clearRect() ou recouvrez avec une couleur qui correspond à l'arrière-plan,
2. utiliser des calques.

Si vous avez besoin d'une image d'arrière-plan, de sorte qu'il n'est pas possible d'effacer avec une seule couleur, les couches sont pratiques comme solution générale. Si vous décidez d'utiliser des couches, je recommande d'utiliser un framework comme paper.js ou kineticJS, elles ont déjà cette fonctionnalité intégrée. Si vous décidez d'implémenter des couches vous-même, vous pouvez créer un autre <canvas> au-dessus de celui de votre arrière-plan, ou, vous avez besoin pour stocker des informations de dessin dans une liste et redessiner la toile entière à chaque fois.