Question

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

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

有些人可能会建议我使用Generic Handler（.ashx）在<img />标记内将图像显示为JPEG。但我遇到的问题是，如果用户右键单击图像进行保存，它将保存为.ashx文件。

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

Answer 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 /获取表单数据并检索base64编码图像的字符串，然后设置my {{1}的src属性标签。

img

就像我说的，有很多方法可以实现这一点，所以这个ROUGH（未经测试）的例子就是我这样做的方法之一。拥有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 } }); }标记应该允许他们右键单击保存图像。

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

在文件目录中创建后在页面上显示自定义生成的图像

1 个答案: