本文介绍了HTML5 Canvas橡皮擦工具,无需重绘白色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有帆布。我有油漆工具铅笔和橡皮擦。如何可以擦除图纸,而不用白色覆盖(覆盖)。
这是我的代码橡皮擦与白色的绘图:
我在后端保存图片。
<?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橡皮擦工具,无需重绘白色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!