0

我在 ASP.NET 中使用 System.Drawing 根据用户在表单中输入的内容生成自定义图像。此图像一旦生成，将保存在服务器上的目录中。

我想要发生的是在单独的页面上显示一个加载图标（在用户提交表单之后），一旦生成自定义图像，加载图标将被服务器目录中的图像替换。

你们中的一些人可能会建议我使用通用处理程序 (.ashx) 将图像显示为<img />标签内的 JPEG。但我遇到的问题是，如果用户右键单击要保存的图像，它将被保存为 .ashx 文件。

我遇到的问题是不知道在文件目录中成功创建图像后如何刷新页面。

4

1 回答 1

1

有很多不同的方法可以实现这一点，但这是我个人会做的。首先，我将创建我的处理程序来接收将生成图像的表单提交（您用于生成图像的数据）（我不会亲自将文件保存到服务器，但如果您希望）并将其编码为 base64，使用我的处理程序使用JSON返回此字符串。

public void ProcessRequest (HttpContext context)
{
    // generate the image from POST / GET data sent to this handler from your form
    Bitmap bmp = GenerateImage(postData);

    // now convert your generated image to a base64 string
    string base64 = string.Empty;
    using (MemoryStream ms = new MemoryStream())
    {
        bmp.Save(ms, ImageFormat.Png);
        base64 = Convert.ToBase64String(ms);
    }

    // now return this base64 string to the caller
    context.Response.ContentType = "application/json";
    string json = "{ \"imageBase64\": \"" + base64 + "\" }";
    context.Response.Write(json);
}

在客户端，我将使用 jQuery 并对我的处理程序进行 Ajax 调用，以 POST/GET 表单数据并检索 base64 编码图像的字符串，然后设置src我的imghtml 标记的属性。

function postAndRetrieveImage() {
    $.ajax({
        url: "http://server/myhandler.ashx",
        data: jsonDataParsedFromForm,
        dataType: "json",
        type: "POST",
        contentType: "application/json",
        async: true,
        cache: false,
        beforeSend: function() {
            // overlay your "loading..." image or something while you wait
            // for response from the server
        },
        complete: function() {
            // hide your "loading..." image (or whatever it is) as the operation
            // has completed
        },
        success: function(data) {
            var response = jQuery.parseJSON(data.d);

            // set the src attribute of the IMG tag (prefixed with the usual 
            // image stuff) with the base64
            var image = document.getElementById("myImage");
            image.setAttribute("src", "data:image/png;base64," + response.imageBase64);
        },
        error: function() {
            // display error in some way
        }
    });
}

就像我说的，有很多方法可以实现这一点，所以这个粗糙（未经测试）的例子是我这样做的方法之一。拥有IMG标签应该允许他们右键单击保存图像。

希望这有助于作为一个起点。

于 2013-01-04T15:32:49.193 回答