Плагин Jquery Image Eraser

Question

Я ищу плагин ластика изображения jquery, который может стереть части реального изображения. Например, если пользователь загружает изображение обезьяны и решает, что ему не нужен хвост, он должен иметь возможность навести курсор мыши на хвост и стереть его. Для простоты предположим, что все изображения черно-белые, а фон всегда белый.

Я искал довольно долгое время, и большинство плагинов "jquery ластик" указывают на ластик холста, а не на настоящий ластик изображений. Например: http://minimal.be/lab/jQuery.eraser/ это создает холст поверх изображения, а затем вы можете стереть холст - это НЕ требование

Несколько других потоков в stackru интересны: как Как частично стереть изображение с помощью javascript, и результат стирания пикселя является прозрачным?

Есть ли плагин, который может сделать это с помощью canvas

Answer 1

Я не знаю плагин без холста, который просто стирает изображения.

Я не думаю, что это легко сделать на стороне клиента без элемента canvas, потому что html5 canvas - единственный нативный элемент, который может редактировать существующее изображение на уровне пикселей, а затем сохранять отредактированное изображение.

Как вы обнаружили, с помощью html5 canvas это достаточно просто сделать:

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

Он использует холст, и все, что мне нужно сделать, это сделать фоновый цвет белым и использовать инструмент ластик для завершения стирания, а затем сохранить изображение обратно