1

このキャンバス関連のスクリプトで、ファイルのアップロード画像を変更して、同じページの画像を選択またはクリックしようとしています。

function aFileIsLoaded(e1)
{
        var filename = e1.target.files[0];
        var fr = new FileReader();
fr.onload = function(e2)
{
      backgroundimage = new Image();
      backgroundimage.src=e2.target.result;
     var context = document.getElementById('myCanvas').getContext('2d');
     context.canvas.width = backgroundimage.width;
     context.canvas.height = backgroundimage.height;
     context.drawImage(backgroundimage, 0, 0, backgroundimage.width, backgroundimage.height);


};
    fr.readAsDataURL(filename);
}



window.onload=function(){
var s = document.getElementById("fontsize");
s.value="48";
document.getElementById('loadpicture').addEventListener('change', aFileIsLoaded, false);
backgroundimagemode=NONE;
carpeInit();
update();
}

以前は、この画像はこのように呼び出され、ファイルはデスクトップから選択されていました

<input type="file" name="back" id="loadpicture" src="myimage.png" >

そして今、私はこれで同じページに画像をロードしようとしています:

<img src="myimage.png" name="back" id="loadpicture" onclick="aFileIsLoaded()">

しかし、私はこのエラーが発生しています:

Uncaught TypeError: Cannot read property 'target' of undefined

どんな助けでも大歓迎です

4

1 に答える 1

2

カスタム関数を呼び出しています。

function aFileIsLoaded(e1)
{
        var filename = e1.target.files[0];

この関数は、ファイル入力変更イベントのEventオブジェクトインスタンスが最初で唯一の引数として渡されることを想定しています。onclickハンドラーでこのパラメーターe1を渡さない

 onclick="aFileIsLoaded()">

回避策は、DOMルックアップを使用して、質問内の要素を検索し、そのファイルを読み取ることです。

 var filename = document.getElementById('loadpicture').files[0]

例にはHTMLコードがないため、答えは完全ではない可能性があります。

イベントに関する詳細情報

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

于 2012-09-28T00:43:38.937 に答える