HTML5 Canvas橡皮擦工具，无需重绘白色 [英] HTML5 Canvas eraser tool without overdraw white color

问题描述

我有帆布。我有油漆工具铅笔和橡皮擦。如何可以擦除图纸，而不用白色覆盖（覆盖）。

这是我的代码橡皮擦与白色的绘图：
http://jsfiddle.net/66z12xb0/

我在后端保存图片。

 <？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）; 
？> 
  

使用Windows照片查看器打开并查看此结果：

>

其他上传foto：

  $（＃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'>上传< / button> 
  

解决方案

橡皮擦是个好主意。

destination-out 那些现有的图纸。

  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）; //把你的mousedown东西放在这里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）{handleMouseMove（e）;}）; #canvas）mouseup（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 =canvaswidth = 300 height = 300>< / canvas>< / br>< button id =pen> Pen< / button>< button id =eraser>橡皮擦< / button>  / pre> 

I have canvas. I have paint tools pencil and eraser. How i can erase drawings without overwrite(overdraw) with white color.

this my code eraser over drawing with white color: http://jsfiddle.net/66z12xb0/

I have in back end save image after drawing.

<?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);
?>

Open with windows photo viewer and see this result:

additional upload foto:

$("#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>

解决方案

Your idea of using compositing to create an eraser is a good idea.

destination-out will remove existing drawings where a new drawing overlaps those existing drawings.

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>

这篇关于HTML5 Canvas橡皮擦工具，无需重绘白色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！