0

json が正常に応答した後に画像を読み込むにはどうすればよいですか?

jQuery

$.post('@Url.Action("Upload", "Camera")', {
  type: 'data',
  image: canvas.toDataURL("image/png")
}, function (result) {
  if(result.success) {
    alert('The image was successfully sent to the server for processing');

    var $image = $("<img src='~/temp/" + @ViewData["CaputredImage"] + "'/>");
    $image.live("load", function () {
      $("#imageContainer").append(this);
    });

  }
});

画像コンテナ

<div id="imageContainer"></div>
4

2 に答える 2

1

サーバーから返された JSON に、新しく送信された画像へのパスを含めて、次のようにします。

$.post('@Url.Action("Upload", "Camera")', {
  type: 'data',
  image: canvas.toDataURL("image/png")
}, function (result) {
  if(result.success) {
    alert('The image was successfully sent to the server for processing');

    // *** Change is on next line ***
    var $image = $("<img src='" + result.imagePath + "'/>");
    // *** Another change on the next line ***
    $image.on("load", function () {
      $("#imageContainer").append(this);
    });

  }
});

liveまた、呼び出しをに変更したことにも注意してくださいon。これはそもそも正しい使い方ではありませんでしたlive。次に、しばらくの間非推奨であり、現在は実際に削除されています。

それとは別に、そこに競合状態があります (ただし、この場合、実際に問題を引き起こす可能性はほとんどありません):を指定するまで、load画像のイベントをフックしていません。ブラウザの JavaScript はシングルスレッドですが (Web ワーカーを使用しない場合)、ブラウザはそうではありません。すでに画像がキャッシュにある場合 (この場合はありそうもないことですが)、フックする前にイベントを発生させることができます。また、イベントにハンドラーがアタッチされていないことを確認すると、JavaScript が次にアイドル状態になったときに実行するようにキューに入れません。 .srcload

また (反対の極端な場合)、画像が読み込まれるまでドキュメントに画像を追加するのを待っています。画像がドキュメントに含まれていない場合、すべてのブラウザーが画像を読み込むと 100% 確信しているわけではありません。

したがって、その価値は次のとおりです。

$.post('@Url.Action("Upload", "Camera")', {
  type: 'data',
  image: canvas.toDataURL("image/png")
}, function (result) {
  if(result.success) {
    alert('The image was successfully sent to the server for processing');

    // *** Changes start here ***
    var $image = $("<img>");
    $image.css({
        position: "absolute",
        left: -10000,
        top: 0
    });
    $image.attr("src", image.imagePath);
    $image.appendTo(document.body);
    $image.on("load", function () {
      $image.remove();
      $("#imageContainer").append("<img src='" + result.imagePath + "'>");
    });
    // *** End of changes ***
  }
});

これにより、imgページ外に要素が作成されますが、ドキュメントでは、画像の読み込みがフックされ、 が設定srcされ、読み込み時にその要素が削除imgされ、CSS が適用されていない新しく作成された要素が優先されます。(これらの呼び出しを連鎖させて、わかりやすくするために分けておくことができます。)

于 2013-03-09T16:18:39.513 に答える
0 
var img = new Image();
img.onload = function () {
   $("#imageContainer").append(img);
}); 
img.src ='~/temp/' + @ViewData["CaputredImage"] ;
于 2013-03-09T16:20:06.517 に答える