javascript - Jquery 图像橡皮擦插件

Question

我正在寻找一个 jquery 图像橡皮擦插件，可以删除实际图像的一部分。例如，如果用户上传了猴子的图像并决定他不想要尾部，那么他应该能够将鼠标移到尾部上并将其删除。为了简单起见，我们假设所有图像都是黑白的，背景始终是白色的。

我搜索了相当长一段时间，大多数“jquery橡皮擦”插件都指向 Canvas 橡皮擦，而不是真正的图像橡皮擦。 例如:http://minimal.be/lab/jQuery.eraser/ 这会在图像顶部创建一个 Canvas ，然后您可以删除 Canvas - 这不是要求

stackoverflow 上的其他几个线程很有趣:比如 How to erase partially image with javascript and result of erase pixel is transperent?

有没有一个插件可以用canvas做到这一点

Answer 1

我不知道有哪个非 Canvas 插件只能删除图像。

我认为没有canvas元素在客户端很容易完成，因为html5canvas是唯一可以在像素级别编辑现有图像然后保存编辑后的图像的 native 元素。

正如您所发现的，使用 html5 canvas 很容易做到:

1. drawImage 将图像绘制到 Canvas 元素上，
2. 使用destination-out合成让用户删除部分图像，
3. 使用 .toDataURL 将编辑后的 Canvas 转换为实际的 img 元素

这是一个简单的概念验证供您开始:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/monkey.jpg";
function start(){
  canvas.width=img.width;
  canvas.height=img.height;
  ctx.drawImage(img,0,0);
  ctx.globalCompositeOperation='destination-out';
  $("#canvas").mousedown(function(e){handleMouseDown(e);});
  $("#save").click(function(){
    alert('This save-to-image operation is prevented in Stackoverflows Snippet demos but it works when using an html file.');
    var html="<p>Right-click on image below and Save-Picture-As</p>";
    html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
    var tab=window.open();
    tab.document.write(html);
  });
}

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  var x=parseInt(e.clientX-offsetX);
  var y=parseInt(e.clientY-offsetY);

  ctx.beginPath();
  ctx.arc(x,y,15,0,Math.PI*2);
  ctx.fill();

}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click on image to erase 10 pixels around mouse</h4>
<canvas id="canvas" width=300 height=300></canvas>
<br>
<button id='save'>Save edited canvas as an image</button>