-1

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

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

stackoverflow 上的其他几个线程很有趣：比如 如何使用 javascript 擦除部分图像并且擦除像素的结果是透明的？

有没有可以用画布做到这一点的插件

4

2 回答 2

1

我不知道仅进行图像擦除的非画布插件。

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

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

  1. drawImage将图像放到画布元素上，
  2. 使用destination-out合成让用户擦除图像的一部分，
  3. 将编辑后的画布转换为实际的 img 元素.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 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>

于 2015-08-05T21:51:19.553 回答
0

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

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

它被称为 wPaint

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

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

于 2015-08-05T22:03:20.530 回答