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直到你指定了它的src. 尽管浏览器上的 JavaScript 是单线程的（除非您使用 Web Worker），但浏览器不是. 如果它已经在缓存中有图像（同样，在这种情况下不太可能），它可以load在你钩住它之前触发事件 - 并且看到没有附加到事件的处理程序，它不会在 JavaScript 下一次空闲时将它们排队运行.

此外（在另一个极端），您正在等待将图像添加到文档中，直到它被加载；如果图像不在任何文档中，我不能 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 回答