gpt4 book ai didi

HTML5 Canvas 橡皮擦工具 不透白 白色

转载 作者:太空狗 更新时间:2023-10-29 13:34:09 24 4
gpt4 key购买 nike

我有 Canvas 。我有绘画工具铅笔和橡皮擦。我如何删除绘图而不用白色覆盖( overdraw )。

这是我用白色绘制的代码橡皮擦: 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照片查看器打开,看到这个结果:

enter image description here enter image description here

附加上传照片:

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

最佳答案

您使用合成来创建橡皮擦的想法是个好主意。

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

// 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 橡皮擦工具 不透白 白色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25907163/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com