Saving html canvas background image with canvas drawing included - javascript

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.

Related

how to redraw modified image using canvas

let me explain you what I do. I need to draw bigg image near to 5000px to 2688px. So I can't draw whole image because in browser it's too long. I decided to add scroll bar to see whole image. The following script allows me to draw a part of canvas
var img = new Image();
img.onload = function(){
canvasW = 5376
canvasH = 2688
ctx.drawImage(img, 0,0, canvasW, canvasH);
};
img.src = "image.png";
Now imagine I want to apply effects like blur or brigthness, contrast etc, My canvas will change, so how can I redraw modified canvas (with effect and not the first one.
I tried to check on stackoverflow but the examples is to redraw image from the first one. I mean the drawing is not from a modifed canvas.
I tried to store base64 of my canvas and redraw by using base64 :
var image = new Image()
image.addEventListener('load', function() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.drawImage(image, canMouseX, canMouseY, canvasW, canvasH);
})
image.src = bases64[bases64.length - 1]
It doesn't work because by storing base64 there is just a part of canvas that is redraw. If you want more details clone my repo on : https://github.com/wyllisMonteiro/draggingScroll/tree/master
I want to find a solution to redraw a modified canvas

How do I merge two transparent png files in Cordova

I have two transparent png files with identical width and height in my cordova/Ionic app. I wish to combine the two png files into a new png file of the same width and height with one file overlayed on top of the other file. i.e., one image is a layer on top of another image. The result must be a transparent png. How can I do this in my javascript cordova app?
You could do this by adding both images to a canvas that you create on the fly, or have in your DOM but not displayed, then read back the canvas by using the canvas' toDataURL("image/png"). Use the 2d context on the canvas to load the images in.
Something like:
var canvas = document.getElementById('myCanvas'); // or create one just don't display it
var ctx = canvas.getContext('2d');
var image1 = '<image url>';
var image2 = '<image url>';
var image = new Image();
var compositeImage;
image.src = image1;
ctx.drawImage(image, 0, 0);
image = new Image();
image.src = image2;
ctx.drawImage(image, 0, 0);
compositeImage = canvas.toDataURL("image/png");
compositeImage then has a data URL of your composite image that you can use to do whatever with.

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/

Javascript draw dynamic image from URL onto canvas element

I am attempting to draw a dynamic PNG image (one that is generated by a PHP script) onto a Canvas element using its URL. I can't really post exact URLs for pages I'm testing this out on, as you must be logged in to the website.
An example of one of the dynamic image URL I'm using is: http://www.website.com/includes/dynamicimage.php?ID=29718958161
If you were logged into this particular website and pasted that URL into your address bar, it would correctly display the image. However, the following Javascript code is not properly drawing it onto the canvas element:
function checkImage(imageContext) {
var canvas = document.createElementNS(
'http://www.w3.org/1999/xhtml', 'canvas');
canvas.width = imageContext.width;
canvas.height = imageContext.height;
var context = canvas.getContext("2d");
var img = new Image();
img.src = imageContext.src;
context.drawImage(img, 0, 0);
newWindow = window.open(imageContext.src, 'newWin', 'width=300,height=300');
newWindow2 = window.open('', 'newWin2', 'width=300,height=300');
newWindow2.document.body.appendChild(canvas);
var imgd = context.getImageData(0, 0, imageContext.width,
imageContext.height);
var pix = imgd.data;
}
I'm having two pop-up windows display both the dynamic image and what is drawn to the canvas, but the canvas is always blank. I am then attempting to do further RGB testing on the image after setting the "pix" variable, but since the image is never drawn to the canvas element, this step fails.
Your problem is that you are not waiting for the image to load before attempting to draw it to the canvas. See the section titled "Playing It Safe" in this question for more details.
In short:
var img = new Image; // First create the image...
img.onload = function(){ // ...then set the onload handler...
ctx.drawImage(img,0,0);
};
img.src = "someurl"; // *then* set the .src and start it loading.

Categories