0

パラメータとして画像を取得する次の関数があります。 

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メソッドを変更して、パラメーターとして別の画像を取得し、両方の画像をマージする必要があります。追加する必要のある新しい画像はbase64エンコーディングであるため、以下は期待どおりに機能しません。

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]
4

1 に答える 1

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

これは正常に機能しています（奇妙な更新の問題を除きます。ページの読み込み時にimage2がimage1に表示されませんが、再読み込み後は問題ありません）。

于 2012-04-30T06:16:28.367 に答える