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

Question

我正在使用JavaScript和Classic ASP创建文件上传器。 将该图像导入画布，然后将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返回的字符串中的加号。

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

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

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