Develop Reference

Overlay two base64 image url and save them as single image in Javascript

I have a whiteboard option during a video call in my web application built in angularjs (1.x). Users can draw above the video in a canvas element. I need to take a screenshot of the current video position and drawing on the canvas. I am able to get the video frame as base64 URL(second image) and canvas drawing as base64 URL(third image) separately. But I need to get it as a combined single image in base64 URL like the first image.
HTML
<img id="img1">
<img id="img2">
<canvas id="mergedImage" width="382" height="510"></canvas>
JS
var drawingImg1 = document.getElementById('img1');
drawingImg1.setAttribute('src', img1);
var drawingImg2 = document.getElementById('img2');
drawingImg2.setAttribute('src', img2);
var c = document.getElementById('mergedImage');
var width = 382;
var height = 510;
var ctx = c.getContext("2d");
var imageObj2 = new Image();
imageObj2.onload = function (){
ctx.drawImage(imageObj2, 0, 0, width, height);
var imageObj1 = new Image();
imageObj1.onload = function (){
imageObj1.style.objectFit = "cover";
ctx.drawImage(imageObj1, 0, 0,width, height);
};
imageObj1.src = img2;
};
imageObj2.src = img1;
I tried the above code and it gives the output as video frame image only not the drawing included.
I want the output as the first image. Please, someone, guide me to do this.
I have created a jsfiddle here

The following solution worked for me to overlap 2 images and got a single image in a canvas.
Link

How do I clear image for redrawing?

I need to find a way to change the picture when the user clicks on it, I seem to be having problems.
heres my code:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = 'Birthday.jpg';
img.onload = function() {
context.drawImage(img, 47, 90, 200, 300);
};
}
Ive already tried things like:
img.onclick = function() {
context.clearRect(47, 90, 200, 300);
img2.src = 'BirthdayOUT.jpg';
context.drawImage(img2, 47, 90, 200, 300);
};

When you paint an image to the canvas you do not paint the image element itself, just a bitmap representation.
This means that the img.onclick will never fire. Instead, you must manually keep track of where you drew the image and use a canvas onclick, determine if you clicked on the image, and then change the draw the new image.

you should create your img.onload function before you set the src, if not the onload may never fire.

I'm not sure what you're trying to achieve here but if you just want to have an image on the page, don't use the 'canvas' and change the image via the 'src' property.
However, if you want to have this on a canvas - which I suspect - you have to store the coordinates/dimensions of the image when it is drawn. Then, to change the picture, use 'clearRect()' to blank that area and draw the new image.
Note that in your code, the 'img' is not passed to the canvas as an element, but as a bitmap, as mentioned by 'Simon Sarris'. That means, your handler for the 'onclick' event must be assigned to the canvas. Then check whether the click occourred within the borders of the image. to achieve that, you need to access 'clientX' and 'clientY' from the event object which declare the position of the mouse click relative to the client area. Make sure to keep your img coordinates relative to the client area too.
Javascript:
window.onload = init;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
function init(){
img.src = 'Birthday.jpg';
context.drawImage(img, /* your img coords */ );
canvas.addEventListener('click', onCanvasClick);
}
function onCanvasClick(event){
var clickX = event.clientX;
var clickY = event.clientY;
if ( clickX > imgLeft && clickX < imgRight && clickY > imgTop && clickY < imgBottom ){ changePicture(); }
}
function changePicture(){
context.clearRect( /* your img coords */ );
img.src = /* new img URL */;
// save new img coords before next step
context.drawImage(img, /* your new img coords */ );
}
Image coordinates called 'imgLeft', 'ImgRight', 'ImgTop', 'imgBottom' / relative to client area!
You may have to modify the function name in 'addEventListener()', I'm not entirely sure. Maybe put the following:
canvas.addEventListener('click', function(){ onCanvasClick(); });

Your problem is not the clearing of the canvas, but the click event handling.
The img.onclick is not firing because the picture on the canvas is not an Image object. See this as an example.

Add image to HTML5 canvas on file upload issue

Allright, this is going to be quite hard to explain but I will try to explain my problem as clear as possible.
I currently have a HTML5 Canvas with a couple of preloaded shapes which I changed to images. I am using a modified version of this example. On the canvas I have now I can drag, drop and select the shapes which are preloaded.
I have implemented an option to upload a new image to the canvas using this:
var imageLoader = document.getElementById('uploader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var imgNew = new Image();
imgNew.onload = function(){
ctx.drawImage(imgNew, 0, 0);
}
imgNew.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
This will now just put an image in the top-left corner of the canvas and when I select another shape this image will disappear. All shapes that are already in the canvas are in an array called 'shapes'. In the example there is an option to add a new shape when you dubbelclick on the canvas, this is the code:
// double click for making new shapes
canvas.addEventListener('dblclick', function(e) {
var mouse = myState.getMouse(e);
myState.addShape(new Shape(mouse.x - 10, mouse.y - 10, 20, 20, 'rgba(0,255,0,.6)'));
}, true);
This is the addShape part which is called when double clicking:
CanvasState.prototype.addShape = function(shape) {
this.shapes.push(shape);
this.valid = false;
}
What I am trying to do is when I upload an image using the file upload the image should be added to the 'shapes' array so I can also drag,drop and select the uploaded image. (basically I need to do the same with the uploaded image as I can do with the preloaded ones) My guess is that it should be done something like the doubleclick method and addShape but I can't get this to work.
A working version of my current version can be found here:
http://codepen.io/anon/pen/qLuCy/
If anyone knows how I can get this to work it would be great!

first the result, here : http://codepen.io/anon/pen/qBmnC/
Your shape object can only draw one single hard-coded image, so change this and have shape be either a color or an image. In fact for this you just have to change shape.draw since the 'type' of the fill does not matter in the constructor.
So just test the fill and draw accordingly :
// Tekent de Shape
Shape.prototype.draw = function(ctx) {
var locx = this.x;
var locy = this.y;
var fill = this.fill ;
if (typeof fill == 'string' )
{
ctx.fillStyle = fill;
ctx.fillRect(locx, locy, this.w, this.h);
}
else
{
ctx.drawImage(fill, locx, locy, this.w, this.h);
}
}
then on image load i just add a shape that has this image as fill :
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var imgNew = new Image();
imgNew.onload = function(){
s.addShape(new Shape(60,60,imgNew.width,imgNew.height,imgNew));
}
imgNew.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
I had to put the shape collection, s, as a global var.
You can also see that i used the same scheme in init() to
add an image once it's loaded.

Canvas - DrawImage Method

I got a strange problem with the "DrawImage"-Methode of the Canvas element. With the following code I create the canvas and attache it to the "rightcanvas" div.
var rightcanvas = document.getElementById('rightcanvas');
rcanvas = document.createElement('canvas');
rcanvas.setAttribute('width', canvasLength);
rcanvas.setAttribute('height', canvasHeight);
rcanvas.setAttribute('id', 'rcanvas');
rightcanvas.appendChild(rcanvas);
And now I try to draw a Base64 encoded image.
var rcontext = rcanvas.getContext('2d');
var image = new Image();
image.src = 'data:image/png;base64,iVBOR....';
rcontext.drawImage(image,0,0);
The canvas will be created and attached. But the image will not be displayed.Does somebody know what the problem is? =(

You have to wait for the image to load before drawing it to the canvas.
var image = new Image();
image.onload = function() {
rcontext.drawImage(image, 0, 0);
}
image.src = 'data:image/png;base64,iVBOR....';

How to find which Object name/id inside a Canvas Element is clicked?

I have two images inside a <canvas> element.
var ctx = document.getElementById('canvas').getContext('2d');
var img1 = new Image();
img1.src = 'cloud.jpg';
img1.name = "Image 1";
img1.onload = function() {
ctx.drawImage(img1, 0, 0);
};
var img2 = new Image();
img2.src = 'eleph.png';
img2.name = "Image 2";
img2.onload = function() {
ctx.drawImage(img2, 250, 250);
};
Now, when User clicks inside canvas, I want to find which object was clicked.
For example, alert img1.name or img2.name when user clicks corresponding image inside the canvas.
Please give some directions as how to do this. Thanks!

First of all, you must have stored in some variable the position and size of each image. After that, add an onclick handler on you canvas element that iterate over the image position collection checking which one is under the mouse on the click event.