文件上传器保存空白图像？

Question

我正在使用 JavaScript 和经典 ASP 创建文件上传器。图像被导入 canvas，然后 base64 URL 被发送到 ASP 脚本，在那里它被解码和下载。

我相信我的 AJAX 请求和 base64 解码工作正常。但是，下载后，查看图像是空白的。我知道某些属性正在运行，因为正在上传的任何图像尺寸都会反映在下载中。我已验证 base64 URL 正常工作，因为我可以在浏览器中保存导出图像。

为了相关性，我已经缩短了代码。

Javascript:

var dataURL = canvas.toDataURL("image/png");
document.getElementById('filePreview').src = dataURL

var request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
        console.log("Image saved.");
    }
};
request.open("POST", "upload.asp", true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("dataURL=" + dataURL);

经典ASP:

base64String = Request.Form("DataURL")

Set tmpDoc = Server.CreateObject("MSXML2.DomDocument")
Set nodeB64 = tmpDoc.CreateElement("b64")
nodeB64.DataType = "bin.base64"
nodeB64.Text = Mid(base64String, InStr(base64String, ",") + 1)

dim bStream : set bStream = server.CreateObject("ADODB.stream")
bStream.type =  1
call bStream.Open()

call bStream.Write( nodeB64.NodeTypedValue )
call bStream.SaveToFile(Server.Mappath("logos/test.png"), 2 )

call bStream.close()
set bStream = nothing

Answer 1

问题原来是canvas.toDataURL返回的字符串中的加号问题。

在服务器端，加号被解码为 space 个字符。所以解决方法是在发送之前对该字符串进行编码。

request.send("dataURL=" + encodeURIComponent(dataURL));

这会将“+”字符转换为“%2B”——然后被 ASP 解释为“+”。

文件上传器保存空白图像？

File uploader saving blank images?

javascript

ajax

file-upload

asp-classic