0

I tried everything to get this work but didn't happen. Want a method to combine two images (that they are overlayed somehow).

I tried it like described here: Merge Image using Javascript

With this Code:

var c=document.createElement("canvas");
c.width = 100;
c.height = 100;
var ctx=c.getContext("2d");
var imageObj1 = new Image();
imageObj1.src = base64String;
var imageObj2 = new Image();
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");
   }
};

But it doesn't work.

I get the first image by Base64 from Local Storage (as described here) like this:

var img = new Image();
img.src = base64String;

And the base64 String looks like this: data:image/png;base64,iVBORw0KGgoAAAANS....

Does this somehow break this approach with canvas? Any help is appreciated :) took me already hours and can't figure it out....

Community
  • 1
  • 1
Moritz Pfeiffer
  • 447
  • 1
  • 7
  • 23
  • What does not work ? Also are you sure about the `100x100` canvas size ? because you are trying to draw Image with 328x526 size. – Hacketo Aug 18 '15 at 09:40
  • I think `imageObj2.src = "2.png";` it may not be a valid src, check dev-tool to see if `imageObj2` is successfully loaded. – fuyushimoya Aug 18 '15 at 09:41
  • also tried it with bigger size. This is only an example. It does not generate the "img". So if I want to add the img to an img-Tag in HTML you'll see nothing. If I add only the imageObj1 (created by base64 from Local Storage) this image is shown as well the imageObj2 alone is shown. But to combine them and write back in "img" does not work – Moritz Pfeiffer Aug 18 '15 at 09:43
  • @fuyushimoya it is. as see my answer above and to give the correct path in my App it is: `imageObj2.src = "www/img/dummy-pic.png";` – Moritz Pfeiffer Aug 18 '15 at 09:45
  • Then try to move the onload before setting the src. You use dataUrl, it may be already loaded when the onload handler registering, so it won't trigger. Or you can use `if(image.complete) {call the hander yourself} else {image.onload = handler}`. – fuyushimoya Aug 18 '15 at 09:46
  • Created a [jsfiddle](https://jsfiddle.net/ad1p3rhp/1/), it just works fine, please create a jsfiddle that can reproduce what you said. – fuyushimoya Aug 18 '15 at 09:55
  • The two sources could present a cross origin issue. Try the code with two images from the same source (domain). If that fails use the Dev tools to step through the code and find the point it fails. Also the `imageObj1.src = base64String;` does not require the onload. The image is loaded at that line directly from the encoded string. You only need on load for the second image. – Blindman67 Aug 18 '15 at 10:10
  • @fuyushimoya I updated your JS Fiddle a little bit as I want to make it: https://jsfiddle.net/ad1p3rhp/16/ But it does not update the div – Moritz Pfeiffer Aug 18 '15 at 11:17
  • You you take a look at the dev-tool's log, you'll see that it says _Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported._ Once you draw some image from the different domain to canvas, the error will throw if you try to access its pixel data. – fuyushimoya Aug 18 '15 at 11:40
  • Take a look at [Tainted canvases may not be exported](http://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported) to see how to solve it. – fuyushimoya Aug 18 '15 at 11:43
  • so the only thing to do normally is only set the .crossOrigin-Property to "anonymous", or didn't I get it right? – Moritz Pfeiffer Aug 18 '15 at 12:15
  • Ok it worked without problems on my Mac with one HTML-File. Unfortunately I need it in a Cordova/Phonegap App and there it will not happen with exactly the same code :-( But I didn't get a SecurityError yet – Moritz Pfeiffer Aug 18 '15 at 18:29

1 Answers1

0

Fixed it like this:

var c = document.createElement('canvas');
c.width = 82;
c.height = 75;
var ctx = c.getContext("2d");
var imageObj2 = new Image();
imageObj2.onload = function (){
    ctx.drawImage(imageObj2, 0, 0, 82, 75);
    var imageObj1 = new Image();
    imageObj1.onload = function (){
        imageObj1.style.objectFit = "cover";
        ctx.drawImage(imageObj1, 14, 4, 53, 53);
    };
    imageObj1.src = data.elephant;
};
imageObj2.src = "2.png";
Moritz Pfeiffer
  • 447
  • 1
  • 7
  • 23