符号64を画像

Question

を使用して、Googleマップのマーカーを構築I有し、パラメータとして画像を取得し、次のfonction：例えば

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; 
} 

：

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

有する：

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

作成されたアイコンは、Googleマップのマーカーとして使用されます：

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

この部分はうまくいきましたが、別のイメージをパラメータとして取り込み、両方のイメージをマージするように、getIconメソッドを変更する必要があります。私は追加する必要があり、新たなイメージがベース64エンコーディングであるとして、以下が期待どおりに動作しません：

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; 
} 

私はで終わる：

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

Answer 1

私はついにそれを考え出した：

そして

// 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; 

、それら2枚の画像取る関数：

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; 
} 

を

これは正常に動作しています（奇妙なリフレッシュの問題を除いて、ページがロードされてもイメージ1にimage2は表示されませんが、リロード後は正常です）。