Chromeで画像のインポートが機能しない

Question

私は実際のJavaScriptやjQueryの文盲で、以前作成した機能のトラブルシューティングを試みていました。これはFirefox上で動作しますが、Chromeで失敗します。画像をインポートしてからデータを切り抜きますが、画像がはっきりしない場合があり、非常に小さいため、ズーム機能を与える必要があります私はそれを使用し、それはどんなバグもなくFirefox上でうまくいきましたが、イメージはすべてchromeで表示されません。その下には、イメージのインポートとそのキャンバスの作成に関連するコードがあります。以前のデベロッパーはdivタグを使ってキャンバスを作成しましたが、divタグでズームと移動ができませんでした。 他の詳細が必要かどうか尋ねてください。次のように

$("#movingImage").empty(); 
//$("#movingImage").attr("src", image.src); 
$("#movingImage").append("<canvas id=\"canvas\">"); 
canvas = $("#canvas")[0]; 
context = canvas.getContext("2d"); 
canvas.width = image.width; 
canvas.height = image.height; 
context.drawImage(image, 0, 0); 

HTMLである：

<div id="views" > 
<img src="" id="movingImage" alt="" /> 
</div> 

Answer 1

append()方法は、対象の子として指定された要素を挿入します。ただし、imgタグには子を入れることはできません。代わりにafterを試してみてください。同じ理由ではなく、empty()方法がここに動作するかどうか確認するために

...

あなたはまた、あなたの作成したキャンバス