Question

I have the following fonction, that gets an image as parameter:

function getIcon(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/png");
  return dataURL;
}

for instance:

icon = getIcon(document.getElementById("car_marker"));    

with:

<img id="car_marker" src="img/car.png"/>

Then the icon created is used as a marker in Google Map:

var marker = new google.maps.Marker({ position: latLng,
                                          map: map,
                                          title: description,
                                          id: id,
                                          icon: icon
                                       });

This part is working fine but I now need to modify the getIcon method so it takes another image as parameter and merge both images. As the new image I need to add is in base 64 encoding, the following does not work as expected:

function getIcon(img1, img2){
  var canvas = document.createElement("canvas");
  canvas.width = img1.width;
  canvas.height = img1.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img1, 0, 0);
  ctx.drawImage(img2, 0, 0); // add the base 64 encoded image here... does not work
  var dataURL = canvas.toDataURL("image/png");
  return dataURL;
}

I end up with:

Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]

Answer 1

I finally figured it out:

// Get the image that will be used as the background image
image1 = document.getElementById("blank_marker");

// Build image from base64 encoding (image that will be put on the previous one)
image2 = new Image();
image2.src = "data:image/jpeg;base64," + base64enc;
image2.height = 20;
image2.width = 20;

Then, the function that takes those 2 images:

function getIcon(image1, image2){
  var canvas = document.createElement("canvas");
  canvas.width = image1.width;
  canvas.height = image1.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(image1, 0, 0);
  ctx.drawImage(image2, 1, 1, 28, 28);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL;
}

That is working fine (except a strange refresh problem: the image2 does not appear on the image1 when the page is loaded but it’s ok after a reload).