Jquery 图片橡皮擦插件

Question

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

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

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

有没有插件可以用 canvas

Answer 1

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

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

如您所见，使用 html5 canvas:

很容易做到

drawImage 图像到 canvas 元素，
使用destination-out合成让用户擦除部分图像，
将编辑后的 canvas 转换为具有 .toDataURL

这里有一个简单的概念验证供您开始：

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

Answer 2

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

我还找到了一个 jquery 插件，我目前正在测试并使用它来解决我最初的问题。

它叫做 wPaint

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

用的是canvas，我只需要将背景色调成白色，用橡皮擦工具完成擦除，然后存回原图即可

Jquery 图片橡皮擦插件

Jquery Image Eraser plugin

javascript

jquery

canvas

image

eraser