javascript - 文件 uploader 保存空白图像？

Question

我正在使用 JavaScript 和经典 ASP 创建文件 uploader 。图像被导入到 Canvas 中，然后将 base64 URL 发送到 ASP 脚本，在其中对其进行解码和下载。

我相信我的 AJAX 请求和 Base64 解码工作正常。但下载后查看图像却是一片空白。我确实知道某些属性正在起作用，因为上传的任何图像尺寸都会反射(reflect)在下载中。我已验证 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 返回的字符串中的加号。

在服务器端，加号被解码为空格字符。因此解决方法是在发送之前对该字符串进行编码。

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

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