Make a Canvas Transparent [duplicate] - javascript

This question already has answers here:
how to edit pixels and remove white background in a canvas image in html5 and javascript
(3 answers)
Closed 7 years ago.
I have a canvas with an id #cnv.
<canvas id="cnv"></canvas>
<img id="img" src=""></img>
I converted the canvas to an image using the code below:
var a = document.getElementById("img");
a.src = document.getElementById("cnv").toDataURL();
After doing so, I save the image in physical disk.Below is the result image:
It's background is white and not transparent. I want to make the image transparent except the lines that is drawn into it.How will I do that?

You can use context.getImageData to fetch the rgba pixel data of your image drawn to a canvas. Then knockout the white values -- leaving only the black lines.
Here's annotated code and a Demo:
// load the image into a new image object
var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/bk.png";
function start(){
// create a canvas element
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
// size the canvas to the image size
canvas.width=img.width;
canvas.height=img.height;
// draw the image onto the canvas
ctx.drawImage(img,0,0);
// get the pixel data of the canvas
var imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
var data=imgData.data;
// make any pure white pixel transparent: data[i+3]=0
// Note: if needed, lower threshold slightly to catch "off-whites"
var threshold=255;
for(var i=0;i<data.length;i++){
if(data[i]==threshold && data[i+1]==threshold && data[i+2]==threshold){
data[i+0]=0;
data[i+1]=0;
data[i+2]=0;
data[i+3]=0;
}
}
// put the modified pixels back on the canvas
ctx.putImageData(imgData,0,0);
// create an image from the canvas contents
// and add that image to the page
var img1=new Image();
img1.onload=function(){
document.body.appendChild(img1);
}
img1.src=canvas.toDataURL();
}
<h4>Image with pure white knocked out</h4>
<br>

Related

How to crop a selected rectangle using based on mouse clicks

I have drawn an image on the canvas.
I want the user to click on the canvas to crop a portion of the image.
How can I do this?
Here's an outline to get you started:
Draw the image onto the canvas
var canvas=document.getElementById('myCanvas');
canvas.drawImage(yourImageObject,0,0);
Listen for mousedown events.
canvas.onmousedown=function(e){handleMouseDown(e);};
Have the user click in the top-left [x0,y0] and bottom-right [x1,y1] corners where they want to crop and record those 2 mouse positions.
The cropping rectangle is defined like this:
var x=x0;
var y=y0;
var width=x1-x0;
var height=y1-y0;
Create a second canvas element and size it to the cropping size:
var secondCanvas = document.createElement('canvas');
secondCanvas.width = width;
secondCanvas.height = height;
document.body.appendChile(secondCanvas);
Use the clipping version of drawImage to draw the cropping rectangle from the first canvas onto the second canvas
secondCanvas.drawImage(canvas,
x,y,width,height, // clip just the cropping rectangle from the first canvas
0,0,width,height // draw just the cropped part onto the first canvas
);
The user's selected portion of the image is now on the second canvas.
If you want to convert the second canvas into an image object, you can do this:
var img=new Image();
img.onload=start;
img.src=secondCanvas.toDataURL();
function start(){
// at this point, img contains the cropped portion of the original image
}

Saving Canvas with the background image

I have a HTML5 canvas element with a background image. User is allowed to draw on the image and then need to save the complete canvas element with the background. I'm using below code for saving part but it only gets the canvas drawing but not the background image. what could i do to get the background image also?
var canvas = document.getElementById('your_canvas');
var context = canvas.getContext('2d');
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
Update:
My HTML
<div name='coords1' class='canvas-area input-xxlarge' disabled
placeholder='Shape Coordinates' id='imgDiv'
data-image-url='BackGround.jpg'></div>
I have the above div in my HTML page. then i dynamically create the canvas and draw on it. It's a bit lengthy code.
Don't use image on the div, draw the image on the canvas ..
use the following code to draw image on canvas,
var img=new Image();
img.src=/*image src*/;
var ctx=canvas.getContext("2d");
img.onload=function()
{
ctx.drawImage(img,x,y,width,height);
}
After image drawing completion at img.onload callback , allow user to draw on canvas...
Now save the canvas drawing....
To Get the Canvas with backgound Image
context.globalCompositeOperation="destination-over";
drawImage(yourBackgroundImage,0,0);

Setting canvas Width and Height according to that of image dynamically

I am working on a project where I have to listen for paste event and save the image from clipboard to server and display it on canvas for further drawing.
What is working: get clipboard image and save it, displaying the image on canvas as background.
What is not working: resizing canvas so that whole image can be displayed. Also, while saving, I does not save the drawing on background image rather it only saves the drawing.
I tried
var newImg = document.getElementById('justimg');
newImg.src = data.showthis;
newImg.onload= function(){
curHeight = newImg.height;
curWidth = newImg.width;
alert(curWidth);
alert(curHeight);}
to get image attribute but its showing canvas attributes only.
<img id="justimg">
<canvas id="bearimage" ></canvas>
Also please suggest how to save canvas drawing with background image.
You need to get the canvas element and then change its width and height like this,
var newImg = document.getElementById('justimg');
newImg.src = data.showthis;
newImg.onload= function(){
var canvas = document.getElementById('bearimage');
canvas.height = newImg.height ;
canvas.width = newImg.width ;
alert(canvas.height);
alert(canvas.width);}
To save canvas image you first need to draw the image on it and then you can save it!
Here is a link to save image, http://www.nihilogic.dk/labs/canvas2image/

how to draw both image and sketch on canvas together

I want to draw an image to canvas and then allow user to draw some sketch on it by sketch.js. Now the situation is:
1.the image has been drawn on the canvas successfully
2. but when my mouse over the canvas, then image disappeared, and the canvas shows empty
3. when I dragged the mouse, some sketch shows on the empty canvas(the sketch looks correct)
so, I've made both functions right, but I'm confused about the part in between. I hope to draw the sketch on the canvas with the image on it. Here is my code:
index.html:
<canvas id="mysketch" width="578" height="400" style="margin: 0px; "></canvas>
canvas.js:
var mysketch = jQuery("#mysketch");
// draw the captured image to canvas
var displayImage = function() {
var context = mysketch.get(0).getContext("2d");
var image = new Image();
image.onload = function() {
context.drawImage(image, 0, 0);
}
// prepend the required image info again
image.src = dataURL;
// call sketch.js to draw sketch on the canvas
mysketch.sketch({defaultColor: "#ff0"});
}
I think that, on your call to sketch method
sketch.js is clearing the canvas first then allows you to draw something on it.
As you can see in the link here, in the 3rd example (i.e. Tools Example) the image is not drawn by drawImage method.
It is actually the background of the canvas which will always be there as background, whatever you draw on it.
So what you can do is:
either do same thing as in the example i.e. set your image as background,
or make a new canvas just behind your canvas with same width, height and on same location and draw your image on it. and do your sketch thing on the second one.

Using JavaScript or jQuery, how can I get the RGB color where ever the mouse is moving specially in <img> or <div> elements

I have an image, <img src="/meAndMy/face.jpg" />. I am trying to get the RGB color when ever or where ever I move my mouse cursor.
How can I do this with jQuery or plain JavaScript? e.g: http://www.script-tutorials.com/demos/158/index.html
Follow up (for copy paste testing):
<?=$this->headScript(); ?>
<script>
$(document).ready(function()
{
var image = new Image();
var ctx = $('#panel')[0].getContext("2d");
/* Load the picture empty.jpg */
image.onload = function ()
{
ctx.drawImage(image, 0, 0, image.width, image.height);
}
/* How can i reload later new?
image.empty; */
image.src = "/agents/empty.jpg";
/* On mouse over to my image, show me the background with RGB
change mousemove to click if requires */
$('#panel').mousemove(function(e)
{
/* Leave as it is */
var canvasOffset = $(this).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
/* Meat */
$(document.body).css('background-color',pixelColor);
});
});
</script>
<body>
<canvas id="panel" width="500" height="333"></canvas>
<body>
You can do it just like the script for that demo does. Note that the demo does not use an img element, rather it loads the image into a canvas element. The canvas API allows you to get the pixel data like so:
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
See the HTML 5 canvas API for details.
If for whatever reason you are required to load the image into the img element, as opposed to a canvas element, you could:
Dynamically create a canvas element with the same size and at the same location as the img.
Copy the image data from img to canvas via the drawImage method from the canvas context.
Hide the img element, leaving the canvas in its place.
You can't get the color of point of an image only with JavaScript ( without the Canvas support ). You need some server-side.
For example: you have a jpg image. You point somewhere, click. An event-listener should send to the server the coordinates and a server-side application will determine what the color is ( the image should be present on the server, of course). see http://muffinresearch.co.uk/code/javascript/pickr/
For your example - the image is read and displayed by a canvas element. An event-listener gets the coordinates of the click and with getImageData() gets a copy of the pixel. The data property contains info for a red, green, blue, and alpha component.

Categories