Question

function SetImage(planViewCanvas, context, componentID) {
    var img = new Image();

    img.onload = function () {
        alert("Fired!!");
        planViewCanvas.width = img.width;
        planViewCanvas.height = img.height;
        context.drawImage(img, 0, 0, img.width, img.height);
        $('#NoPlanViewImage').hide();
    }

    $.ajax({
        url: '../PlanView/RenderFloorPlanImage',
        data: { ComponentID: componentID },
        datatype: 'json',
        success: function (imageSource) {
            if (imageSource !== "") {
                img.src = '../PlanView/RenderFloorPlanImage?ComponentID=' + componentID;
            }
        }
    });
}

这会导致img.onload触发。然而：

$.ajax({
    url: '../PlanView/RenderFloorPlanImage',
    data: { ComponentID: componentID },
    datatype: 'json',
    success: function (imageSource) {
        if (imageSource !== "") {
            img.src = imageSource;
        }
    }
});

修改ajax请求s.t.我把src设置为返回的数据是不行的。我想设置图像而不必第二次回到我的控制器，但我还想在图像完全加载后触发onload事件。这怎么可以实现？

    public ActionResult RenderFloorPlanImage(int componentID)
    {
        PlanViewComponent planViewComponent = PlanViewServices.GetComponentsForPlanView(componentID, SessionManager.Default.User.UserName, "image/png");

        MemoryStream memoryStream = null;

        if (!Equals(planViewComponent, null))
        {
            FloorPlan floorPlan = GetDesktopFloorPlan(planViewComponent);

            // get the floor plan for the desktop...
            if (!Equals(floorPlan, null) && !Equals(floorPlan.Image, null) && floorPlan.Image.Length > 0)
            {
                memoryStream = new MemoryStream(floorPlan.Image);
            }
        }

        return !Equals(memoryStream, null) ? File(memoryStream, "image/png") : null;
    }

我想更好的问题可能是“我如何将文件加载到图像中？”当我设置src属性时，它似乎是自动完成的，但是当我得到结果的句柄时，它不会自动完成。

Answer 1

您正在流式传输图像的二进制文件。这不能在AJAX调用中设置为SRC。服务器将发送MIME类型，然后流式传输文件。 Ajax调用期待PATH，然后浏览器将自己获取文件。

即。请求需要text / HTML作为响应，但会获得意外的图像MIME标头+二进制数据。

Answer 2

您的浏览器无法加载图片，因此不会触发onload。

src=属性必须设置为有效的 URI ，而不是原始png数据。想想如果你在那里输入原始PNG文件会对HTML文件产生什么影响。难怪它会破裂。

您可以通过Base64对图像进行编码并使用所谓的data:网址进行一些扩展作弊。我不确定跨浏览器对此的支持程度如何。根据我的阅读，Internet Explorer＆lt; = 7将不工作。

为什么第一个代码片段导致image.onload触发，但第二个代码片段没有？

2 个答案: