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);
Related
I have an image in my html dom
(the green border image) it has a img tag and having a src url.
I've tried with fetch by retrieving blob but request isn't supporting second request. Server is refusing to get image for second time.
So I've tried with canvas with
ctx.drawImage(imgNode, 0,0)
and tried placing it in dom. The canvas copies the image.
But when I tried getting toDataURL and getImageData
it shows following errors.
Later, I tried with imgnode.crossOrigin = 'anonymouse'
But then Image breaks.
I've checked by right click > copy image Then I can paste image somewhere else.
So how am I supposed to save this image/copy this image in my local disk.
I'm using selenium with python. I want to retrieve image.
Run this javascript code on the page and create an alert(). You can change the "image/jpeg" to png or as it is.
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/jpeg");
return dataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
}
alert(getBase64Image(document.getElementById("ImgCaptcha")))
In your application, make a listener to the alert and capture the base64 image value.
Is it possible that after user finished their drawings and save both backgroundImage and drawings that they did?
var canvas = document.getElementById("canvas"); // comes from html
var context = canvas.getContext("2d"); // get context of canvas
canvas.style.backgroundImage = `url(${value.result.questionImage})`; // images comes from sql database.
// user does some drawing on the canvas...
You should draw the background image on the canvas instead of using style:
var canvas = document.getElementById("canvas"); // comes from html
var context = canvas.getContext("2d"); // get context of canvas
var image = document.createElement('img')
image.onload = ()=>context.drawImage(image, 0,0);
image.src=value.result.questionImage;
Now, when the you get the data url the question image will be used also because it is now an ordinary part of the canvas.
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>
I have a canvas that is edited by a user (some drag and drop stuff), and it has some instructions printed in text on it. I want to save the image without that text.
I am using KeneticJS. The size will always be the same and the text is at the bottom of the image, so I was thinking if I could just crop that out that would work fine. I am passing the image as a dataURL to my solution, is it possible to crop the image before sending it as a data url?
It would be great if I could just say dataURL.crop(height, width); or something.
Here is my code which, on button press, sends the image as a data url to my filemaker solution.
bGroup.on('click touchstart', function(){
stage.toDataURL({
callback: function(dataUrl) {
var myParam = encodeURIComponent(dataUrl.split(',').pop());
theURL = 'fmp://$/" & Get(FileName)& "?script=MoistureMap_Done¶m=' + myParam;
window.location= theURL;
bDone.fill('green');
buttonLayer.draw();
}});
});
There's no direct way of clipping your text, but it's not difficult:
Create an image from the dataURL (or use the texted image if you still have access to it).
Create a new in-memory canvas: document.createElement('canvas');
Resize the canvas to your desired clipped size: canvas.width=10; canvas.height=10;
Draw the image from #1 onto the canvas: context.drawImage
The text at the bottom of the image will automatically be clipped since the in-memory canvas is smaller than the incoming image.
Pull the dataurl of the in-memory canvas: canvas.toDataURL
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/