I am looking for a jquery image eraser plugin that can erase parts of an actual image. For example, if a user uploads an image of a monkey and decides that he does not want the tail, then he should be able to move the mouse over the tail and erase it. To keep it simple, lets assume that all images are black and white and background is always white.
I have searched for quite some time and most "jquery eraser" plugins point to a canvas eraser and not a true image eraser.
For example: http://minimal.be/lab/jQuery.eraser/
this creates a canvas on top of an image and you can then erase the canvas - this is NOT the requirement
Couple of other threads on stackoverflow are interesting: like
How to erase partially image with javascript and result of erase pixel is transperent?
Is there a plugin that can do this with canvas
I don't know of a non-canvas plugin that does just image erasing.
I don't think its easily done on the client-side without the canvas element because html5 canvas is the only native element that can edit an existing image at the pixel level and then save the edited image.
As you've discovered, it's easy enough to do using html5 canvas:
drawImage an image onto a canvas element,
Use destination-out compositing to let the user erase part of the image,
Convert the edited canvas to an actual img element with .toDataURL
Here's a simple proof-of-concept for you to start from:
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>
markE's answer actually shows how to start to build your own flexible image eraser plugin and its an excellent start.
I also found a jquery plugin that i am currently testing and using to do what my original question was.
It is called wPaint
http://www.jqueryscript.net/other/jQuery-Plugin-for-Simple-Drawing-Surface-wPaint.html
It uses canvas and all i have to do is make the background-color white and use the eraser tool to accomplish the erasing and then save the image back
Related
I've got a canvas with the id=canvas and in this canvas are many balls. I need to add some information to these balls. So I've got a ball with the text="ball1" on it. And I need to add some text under this line, something like text2="My Super Ball".
Also I know the radius and coordinates of the balls.
How can I do so if I only got the canvas and ball id?
Problem: You can't change anything that's already been drawn on the html5 canvas
So...
You've been given a canvas with existing text-ball drawings and you need to change the text in one of the balls.
But...
Html5 canvas is like a real wall painting. You draw a red ball with "ball1" on the canvas and hang it on the wall. You can't later change the "ball1" text by replacing it with "My Super Ball".
Option#1: Redraw everything on the canvas
If the canvas contains only balls (==context.arc) filled with text (==context.fillText), then you can erase the entire canvas with context.clearRect and redraw the text-balls with your desired text.
Option#2: Redraw just the ball(s) that need text changes
If the canvas contains content that you don't want to destroy by clearing the canvas, then you can over-write a ball by refilling it with its original color and then drawing your changed text inside the refilled ball.
Here's example annotated code & a demo showing both methods:
// canvas vars
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// create an array of "ball" objects
// Each object contains sufficient info to redraw a ball
var balls=[
{x:100,y:100,radius:50,fill:'red',text:'ball1'},
{x:200,y:100,radius:35,fill:'blue',text:'ball2'},
{x:300,y:100,radius:25,fill:'green',text:'ball3'},
];
// To start, draw the basic balls
drawAll();
// listen for button clicks
$('#redrawAll').click(function(){
// toggle the super ball: ball1 <-> super
var b=balls[0];
if(b.text=='ball1'){
b.text='My Super Ball';
}else{
b.text='ball1';
}
// completely clear the canvas
ctx.clearRect(0,0,cw,ch);
// redraw all balls
drawAll();
});
//
$('#overwriteOne').click(function(){
// toggle the super ball: ball1 <-> super
var b=balls[0];
if(b.text=='ball1'){
b.text='My Super Ball';
}else{
b.text='ball1';
}
// over-write just the super ball
drawTextBall(b.x,b.y,b.radius,b.fill,b.text);
});
function drawAll(){
// completely clear the canvas
ctx.clearRect(0,0,cw,ch);
// redraw all balls from the info in balls[] array
for(var i=0;i<balls.length;i++){
var b=balls[i];
drawTextBall(b.x,b.y,b.radius,b.fill,b.text);
}
}
function drawTextBall(x,y,radius,fill,text){
// this function changes some styles so we'll be kind and
// restore the incoming style when we're done.
ctx.save();
// draw a red ball at x,y
ctx.beginPath();
ctx.arc(x,y,radius,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=fill;
ctx.fill();
// draw text centered at x,y
ctx.fillStyle='white';
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fillText(text,x,y);
// restore the original incoming styles
ctx.restore();
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='redrawAll'>Clear and Redraw all balls</button>
<button id='overwriteOne'>Overwrite just 1 ball</button>
<br>
<canvas id="canvas" width=400 height=200></canvas>
I have overlay image with rectangle transparent hole. Beneath is scalable and draggable image. How to cut only visible part of image ?
How to determine size and position of transparent rectangle ? Is it possible to do pixel by pixel alpha channel search only on overlay image ?
Any other ideas ?
EDIT:
Solution to another quoted problem is usefull, although it works only on whole canvas not on individual items like background, overlay or added images or shapes. Is it possible to read pixel values on individual fabric elements ?
I use overlay image as external png files.
The FabricJS API does not include a method to fetch the pixel values of an image.
You will have to draw your overlay image onto an html5 canvas and use getImageData to fetch the pixel data from that canvas.
getImageData().data contains the red, green, blue & alpha information for each pixel on the canvas.
You can test each pixel's alpha value and determine the minimum & maximum boundary of the transparent rectangle.
Here's example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="http://masterblocks.co.in/static/img/logo.png";
function start(){
cw=canvas.width=img.width;
ch=canvas.height=img.height
ctx.drawImage(img,0,0);
// clear a test rectangle
ctx.clearRect(100,100,100,75);
// get clear rect bounds
var bounds=findCutoutBounds();
// test: stroke the bounds
ctx.lineWidth=2;
ctx.strokeStyle='red';
ctx.strokeRect(bounds.x,bounds.y,bounds.width,bounds.height);
}
// Get the imageData of that canvas
function findCutoutBounds(){
var minX=1000000;
var minY=1000000;
var maxX=-1;
var maxY=-1;
var data=ctx.getImageData(0,0,canvas.width,canvas.height).data;
for(var y=0;y<ch;y++){
for(var x=0;x<cw;x++){
var n=(y*cw+x)*4;
if(data[n+3]<5){
if(y<minY){minY=y;}
if(y>maxY){maxY=y;}
if(x<minX){minX=x;}
if(x>maxX){maxX=x;}
}
}}
return({x:minX,y:minY,width:maxX-minX,height:maxY-minY});
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<h4>The bounding box of the transparent rectangle is stroked in red</h4>
<canvas id="canvas" width=300 height=300></canvas>
I have an sprite image which i use to display icons on divs.
I have classnames to identify each icon in the sprite.
Now what i want is, I have a div which show a particular icon and i want to draw the same icon on a canvas.. I.E. the div's background image should get rendered on a canvas.
The other thing that i can do is. I can use an image element and provide the sprite image url and draw the image on the canvas.
But due to some issues. i cant use this option.
Can anyone help me in rendering the div's background on a canvas.
Values available to render are css Class name for that specific icon. its position in the sprite. and its size.
Here's how to:
Get the URI of your div's background image,
Create an image from that URI,
Draw that image onto canvas.
Note: The browser has probably cached the background-image so you probably won't round-trip to the server to refetch the image.
Example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// get the dataURL of your div's background
var bg = $('#myDiv').css('background-image');
bg = bg.replace('url(','').replace(')','').replace('"','').replace('"','');
// build an image from the dataURL
var img=new Image();
//img.crossOrigin='anonymous';
img.onload=function(){
// draw the image onto the canvas
ctx.drawImage(img,0,0);
}
img.src=bg;
body{ background-color: ivory; padding:10px; }
#myDiv{width:75px;height:75px;background-image:url(https://dl.dropboxusercontent.com/u/139992952/multple/sun.png);}
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='myDiv'>Sprite div with background image</div>
<canvas id="canvas" width=100 height=100></canvas>
In html5, when you draw to a canvas using putImageData(), if some of the pixels you are drawing are transparent (or semi-transparent), how do you keep old pixels in the canvas unaffected?
example:
var imgData = context.createImageData(30,30);
for(var i=0; i<imgData.data.length; i+=4)
{
imgData.data[i]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
if((i/4)%30 > 15)imgData.data[i+3] = 0;
}
context.putImageData(imgData,0,0);
The right half of the 30x30 rect is transparent.
If this is drawn over something on the canvas, pixels behind the right half are removed (or become thransparent). How do I keep them?
You can use getImageData to create a semi-transparent overlay:
create a temporary offscreen canvas
getImageData to get the pixel data from the offscreen canvas
modify the pixels as you desire
putImageData the pixels back on the offscreen canvas
use drawImage to draw the offscreen canvas to the onscreen canvas
Here's example code and a Demo: http://jsfiddle.net/m1erickson/CM7uY/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
// draw an image on the canvas
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stack1/landscape1.jpg";
function start(){
canvas.width=img.width;
canvas.height=img.height;
context.drawImage(img,0,0);
// overlay a red gradient
drawSemiTransparentOverlay(canvas.width/2,canvas.height)
}
function drawSemiTransparentOverlay(w,h){
// create a temporary canvas to hold the gradient overlay
var canvas2=document.createElement("canvas");
canvas2.width=w;
canvas2.height=h
var ctx2=canvas2.getContext("2d");
// make gradient using ImageData
var imgData = ctx2.getImageData(0,0,w,h);
var data=imgData.data;
for(var y=0; y<h; y++) {
for(var x=0; x<w; x++) {
var n=((w*y)+x)*4;
data[n]=255;
data[n+1]=0;
data[n+2]=0;
data[n+3]=255;
if(x>w/2){
data[n+3]=255*(1-((x-w/2)/(w/2)));
}
}
}
// put the modified pixels on the temporary canvas
ctx2.putImageData(imgData,0,0);
// draw the temporary gradient canvas on the visible canvas
context.drawImage(canvas2,0,0);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
</body>
</html>
Alternatively, you might check out using a linear gradient to do your effect more directly.
http://jsfiddle.net/m1erickson/j6wLR/
Problem
As you know, your statement
if((i/4)%30 > 15)imgData.data[i+3] = 0;
will make pixels on the right half of the image be transparent, so that any other object on the page behind the canvas can be seen through the canvas at that pixel position. However, you are still overwriting the pixel of the canvas itself with context.putImageData, which replaces all of its previous pixels. The transparency that you add will not cause the previous pixels of to show through, because the result of putImageData is not a second set of pixels on top of the previous pixels in the canvas, but rather the replacement of existing pixels.
Solution
I suggest that you begin your code not with createImageData which will begin with a blank set of data, but rather with getImageData which will give you a copy of the existing data to work with. You can then use your conditional statement to avoid overwriting the portion of the image that you wish to preserve. This will also make your function more efficient.
var imgData = context.getImageData(30,30);
for(var i=0; i<imgData.data.length; i+=4)
{
if((i/4)%30 > 15) continue;
imgData.data[i]=255;
imgData.data[i+1]=0;
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
context.putImageData(imgData,0,0);
Something that tripped me up that may be of use... I had problems with this because I assumed that putImageData() and drawImage() would work in the same way but it seems they don't. putImageData() will overwrite existing pixels with its own transparent data while drawImage() will leave them untouched.
When looking into this I just glanced at the docs for CanvasRenderingContext2D.globalCompositeOperation (should have read more closely), saw that source-over is the default and didn't realise this would not apply to putImageData()
Drawing into a temporary canvas then and using drawImage() to add the temp canvas to the main context was the solution I needed so cheers for that.
I wanted to copy a CRISP, un modified version of the canvas on top of itself. I eventually came up with this solution, which applies.
https://jsfiddle.net/4Le454ak/1/
The copy portion is in this code:
var imageData = canvas.toDataURL(0, 0, w, h);
var tmp = document.createElement('img');
tmp.style.display = 'none'
tmp.src = imageData;
document.body.appendChild(tmp);
ctx.drawImage(tmp, 30, 30);
What's happening:
copy image data from canvas
set image data to a non-displayed <img> (<img> has to be in dom though)
draw that image back onto the canvas
you can delete or reuse the <img> at this point
It is an old question, but I had a similar issue and came up with another solution that fits me better (similar to #popClingwrap's answer, but I'll elaborate a bit more). I have a WebWorker and I want it to copy and paste an svg file multiple times in an existing canvas. If the source of your ImageData is another Canvas, and you want to copy the data to another canvas, there is an easier way than manipulating pixel values in a loop. the ctx.drawImage() function does overlay images respecting transparency and can also take another canvas as source.
So I used Canvg to create a source canvas containing my source image ( For your application this will look different)
const cnv = new OffscreenCanvas(100, 100);
const loadCanvas = async () => {
const v = await Canvg.from(cnv.getContext("2d"), src, preset);
await v.render();
};
For your example this would probably look something like this
var cnv = document.createElement('canvas');
var ctx = cnv.getContext('2d');
cnv.width = 30;
cnv.height = 30;
ctx.putImageData(imgData, 0, 0);
And then you can draw this transparent image on top of an existing image as often as needed with:
ctx.drawImage(cnv, 0, 0);
Let say I got the sprite to the left and I want to apply a red filter over the image before drawing it in a canvas so it looks like the sprite to the right. http://puu.sh/6dQ0E.png
Is there a way to do that?
It could be done in two steps, but I don't know if it's possible to draw the geometric figure that has the exact same shape than the image. (Ex: Drawing a rectangle over it won't match.)
Note: I want the filter to only be applied to this image, not the whole canvas.
You can combine 2 filtering operations to draw the red filter only on top of your existing sprite.
globalCompositeOperation="source-atop" will cause new drawings to only draw on top of existing non-transparent pixels.
globalAlpha will make your new drawings semi-transparent.
Taken together, you can draw a semi-transparent filter that only fills where your non-transparent ghost exsits.
Then just draw a red rectangle over your existing sprite (the rectangle will only be visible inside the existing ghost).
ctx.drawImage(ghostSprites,0,0);
ctx.globalAlpha=0.62;
ctx.globalCompositeOperation="source-atop";
ctx.fillStyle="red";
ctx.fillRect(spriteX,spriteY,spriteWidth,spriteHeight);
Demo: http://jsfiddle.net/m1erickson/W4XrG/
From here...
Notice the black outlines of your sprite become washed from the red filter.
You could also use context.getImageData to grab only the black pixels of your ghost. Then redraw those black pixels over your red-filtered ghost so the black outlines are not washed. If you feel ambitious, you could give that a try!
Good luck with your project!
Here’s code
<style>
body{ background-color: ivory; padding:20px;}
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=start;
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp0a.png";
function start(){}
var spriteX=0;
var spriteY=0;
var spriteWidth=133;
var spriteHeight=161
$("#recolor").click(function(){
ctx.drawImage(img,0,0);
ctx.globalAlpha=0.62;
ctx.globalCompositeOperation="source-atop";
ctx.fillStyle="red";
ctx.fillRect(spriteX,spriteY,spriteWidth,spriteHeight);
});
}); // end $(function(){});
</script>
</head>
<body>
<p>Before</p>
<img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/temp0a.png">
<p>After</p>
<button id="recolor">Click to recolor the green sprite</button><br>
<canvas id="canvas" width=300 height=161></canvas>
</body>
</html>