如何用javascript和擦除像素的结果部分擦除图像？
如何用javascript和擦除像素的结果部分擦除图像？
提问于 2013-08-04 10:53:20
我的要求是用户上传图像，然后用户可以删除一些他们不想要的图像，例如他们有人类的图像，他们不想要人体的像素，然后他们可以擦除它。我的程序是一个网络基础。我使用js画布，但我只能通过添加白色像素到图像，我想要白色像素是透明的擦除。我该怎么办？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-08-04 16:07:25
您可以使用复合来“擦除”以前绘制的图像.
Context.globalCompositeOperation=”destination-out”的行为如下：
与上一张绘图重叠的任何后续绘图都将导致“擦除”上一张绘图。
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation="destination-out";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,300);
ctx.moveTo(300,0);
ctx.lineTo(0,300);
ctx.lineWidth=20;
ctx.fillStyle="blue";
ctx.stroke();下面是代码和Fiddle：http://jsfiddle.net/m1erickson/puYTy/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
start();
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
function start(){
ctx.drawImage(img,0,0);
ctx.globalCompositeOperation="destination-out";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,300);
ctx.moveTo(300,0);
ctx.lineTo(0,300);
ctx.lineWidth=20;
ctx.fillStyle="blue";
ctx.stroke();
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Composite: destination-out</p>
<p>The lines will "erase" the existing image</p>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18042150
复制相关文章
相似问题
腾讯云开发者
