4

Javascript で作成した描画アプリケーションに画像アップローダーがあります。ユーザーがキャンバスに同じ画像を複数配置できるようにしたい。ただし、既にキャンバスにある画像をアップロードしようとすると、何も起こらず、アップローダーのイベント ハンドラーのブレークポイントに到達しません。どうすれば修正できますか? ありがとう！

私の画像ハンドラのコードは次のとおりです。

function handleImage(e) {
var reader = new FileReader();
reader.onload = function(event) {
  var img = new Image();
  img.onload = function() {
    img.className = 'drag';
    img.style.left = 0;
    img.style.top = 0;
    context.drawImage(img, parseInt(img.style.left, 10) , parseInt(img.style.top, 10));
    images.push(img);
  }
  img.src = event.target.result;
 }
 reader.readAsDataURL(e.target.files[0]);
 };
4

1 に答える 1

1

Rene Pot が同じ画像を再度使用することに同意する傾向があります (複製ボタン) が、ユーザーが同じ画像を再度挿入/ロードするのを防ぐことはできません。少し前にこの問題に遭遇し、このコードを使用して、画像が既にキャッシュされているかどうかを確認しました（キャッシュされている場合、ロードがないため、オンロードも起動しません）。

var img = new Image();
img.src = event.target.result;

var insertImage = function() {
    img.className = 'drag';
    img.style.left = 0;
    img.style.top = 0;
    context.drawImage(img, parseInt(img.style.left, 10) , parseInt(img.style.top, 10));
    images.push(img);
  }

if(img.complete){
   img.onload = insertImage;
} else {
   insertImage();
}

それが役立つことを願っています。

于 2013-07-23T03:52:08.607 に答える