Overlay two images to one img src

Asked Dec 07 '16 at 16:29

Active Dec 07 '16 at 16:41

Viewed 210 times

The following question Merge Image using Javascript has some good answers to it.
But the answers only have javascript and not the html context where they are in.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "1.png"
imageObj1.onload = function() {
    ctx.drawImage(imageObj1, 0, 0, 328, 526);
    imageObj2.src = "2.png";
    imageObj2.onload = function() {
        ctx.drawImage(imageObj2, 15, 85, 300, 300);
        var img = c.toDataURL("image/png");
        document.write('<img src="' + img + '" width="328" height="526"/>');
    }
};

var canvas = canvasBuild.getContext('canvasObj');
var img = document.getElementById('mergePic1');
canvas.drawImage(img, 0, 0);

What would be a full working example with the html code?

edited May 23 '17 at 12:24

Community

asked Dec 07 '16 at 16:29

Reginald Johnson

The HTML would literally just be `` – Rory McCrossan Dec 07 '16 at 16:34
Thanks. I am getting an error on "todataURL" Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. on line 12 – Reginald Johnson Dec 07 '16 at 16:39
1

It sounds like the images you're placing in the canvas are not hosted on your own domain - hence the security warning. You need to host the images on the same domain that the canvas is running on. – Rory McCrossan Dec 07 '16 at 16:41
@RoryMcCrossan Thanks for your help so far. How would I load the external images into my DOM, so I can use them in my canvas? – Reginald Johnson Dec 07 '16 at 16:59
I don't believe you can - it's a browser level security restriction. You need to host them yourself. – Rory McCrossan Dec 07 '16 at 16:59

Overlay two images to one img src

0 Answers0