Question

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

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

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

是否有可以使用canvas

执行此操作的插件

Answer 1

我不知道非图片插件只能进行图像擦除。

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

正如您所发现的那样，使用html5画布很容易：

drawImage将图像放到画布元素上
使用destination-out合成让用户删除部分图片，
使用.toDataURL

这是一个简单的概念验证，您可以从以下开始：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

markE的答案实际上展示了如何开始构建自己的灵活图像橡皮擦插件，这是一个很好的开始。

我还发现了一个jquery插件，我正在测试并使用它做我原来的问题。

它被称为wPaint

http://www.jqueryscript.net/other/jQuery-Plugin-for-Simple-Drawing-Surface-wPaint.html

它使用画布，我所要做的就是使背景颜色为白色并使用橡皮擦工具完成擦除然后将图像保存回来

Jquery Image Eraser插件

2 个答案: