4

我有点卡在这里。我知道我可以使用 canvas.toDataURL 生成一个 base64 编码的字符串，以传递给我服务器上的经典 ASP 页面。但是我似乎找不到答案的问题是如何处理这些数据，以便我可以将它保存在我的服务器上的某个地方。

因此，使用我的 HTML 页面上的这段代码，我提取了画布数据（我从 StackOverflow 的另一篇文章中提取了这个数据）：

var dataURL = renderedCanvas.toDataURL("image/png");    
dataURL = dataURL.replace('data:image/png;base64,', '');

var areturn = $.ajax({
  url: "http://127.0.0.1/mySite/saveImage.asp",
  type: "POST",
  data: '{ "imageData" : "' + dataURL + '" }',
  dataType: "json",
  beforeSend: function(x) {
      x.overrideMimeType("application/j-son;charset=UTF-8");
  }
}).done(function(result) {
    console.log("Success Done!\n" + result);
}).always(function(data) {
    console.log("Always:\n" + data.responseText);
});

但是我现在不清楚一旦我在服务器端如何处理数据......我可以拉 Request.Form 元素，但我似乎找不到一个好的方法来解码它，或者甚至将其输出为二进制文件...我想我听说经典的 ASP 不擅长进行 base64 解码，在另一个测试中我确实找到了一个可以进行 base64 解码的函数，但我不知道如果它真的有效，但它确实需要很长时间才能运行。我还在这里找到了这个链接：base64 image decoder for ASP classic，但我想这是微软不推荐使用的 32 位组件......我想我正在向社区寻求关于保存 html5 画布的建议图像到服务器。

4

3 回答 3

5

您可以使用 XML 元素指定bin.base64通过DomDocument实例创建的数据类型来编码/解码 Base64 数据。
然后您可以使用Stream对象将获得的二进制文件保存到磁盘。
这两个库都支持 64 位。假设您发送的内容将在服务器端的 Request 集合（没有 json 的经典 post 方法等）中可用，下面的代码可以解决问题，或者在最坏的情况下，我相信这会给您带来洞察力。

保存图像.asp

Function Base64Data2Stream(sData)
    Set Base64Data2Stream = Server.CreateObject("Adodb.Stream")
        Base64Data2Stream.Type = 1 'adTypeBinary
        Base64Data2Stream.Open
    With Server.CreateObject("MSXML2.DomDocument.6.0").createElement("b64")
        .dataType = "bin.base64"
        .text = sData
        Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded base64 to stream
        Base64Data2Stream.Position = 0
    End With
End Function

Dim CanvasStream
Set CanvasStream = Base64Data2Stream(Request.Form("imageData"))

'Write binary to Response Stream
'Response.BinaryWrite CanvasStream.Read

'Write binary to File
CanvasStream.SaveToFile Server.Mappath("imgFileFromCanvas.png"), 2 'adSaveCreateOverWrite
于 2012-10-15T23:31:46.557 回答
0

只是想我会分享一个解决方案。

$(document).ready(function(){
    getBase64FromImageUrl('test5px.png');

            function getBase64FromImageUrl(URL) {
                var img = new Image();
                img.src = URL;
                img.onload = function () {          
                var canvas = document.createElement("canvas");
                canvas.width =this.width;
                canvas.height =this.height;         
                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0);          
                var dataURL = canvas.toDataURL("image/png");            
                //alert(  dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
                saveImageData(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
                }
            }

            function saveImageData (image_data) {
                $.post("saveImage.asp",
                {imageData:image_data,submit:true})
                .done(function(data, textStatus, jqXHR) 
                    {
                    alert(data);             
                    }).fail(function(jqXHR, textStatus, errorThrown) 
                {
                    alert(textStatus);
                });
 });

在 HTML 中

<img id="test" src="http://someDomain.com/img/test5px.png">

我实际上是从网络摄像头 canvas.toDataURL 获取图像数据作为快照，但它也适用于页面上的 img 标签

在 saveImage.asp 中

<%@ Language=VBScript %>
<% Option Explicit %>
<%

response.write(request("imageData"))

Function Base64Data2Stream(sData)
    Set Base64Data2Stream = Server.CreateObject("Adodb.Stream")
        Base64Data2Stream.Type = 1 'adTypeBinary
        Base64Data2Stream.Open
    With Server.CreateObject("MSXML2.DomDocument.6.0").createElement("b64")
        .dataType = "bin.base64"
        .text = sData
        Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded base64 to stream
        Base64Data2Stream.Position = 0
    End With
End Function

Dim CanvasStream
Set CanvasStream = Base64Data2Stream(Request.Form("imageData"))

'Write binary to Response Stream
'Response.BinaryWrite CanvasStream.Read

'Write binary to File
CanvasStream.SaveToFile Server.Mappath("userImages/" & request("imageName")), 2                    'adSaveCreateOverWrite
%>
于 2014-10-27T02:02:57.910 回答
0

我的答案基于第一个答案，并进行了一些修改使其真正起作用：首先，在客户端，我们使用以下功能：

        function onSave(){
        $.ajax({
          type: "POST",
          url: "saveSignature.asp",
          data: { 
             imgBase64: document.getElementById("eSignatureBoard").toDataURL(),
          }
        })
        .fail(function(oErr,sErr1,sErr2) {
            alert ("err - "+sErr1+"  "+sErr2);
        })    
        .done(function(){
            alert ("done");
        });   
    }

在asp服务器端，我们使用以下代码：

dim sImg
sImg=request.form("imgBase64")
sImg = replace(sImg,"data:image/png;base64,", "")
sImg = replace(sImg," ", "+")

Set oStream = Server.CreateObject("Adodb.Stream")
oStream.Type = 1 
oStream.Open
With Server.CreateObject("MSXML2.DomDocument.6.0").createElement("b64")
    .dataType = "bin.base64"
    .text = sImg
    oStream.Write .nodeTypedValue 'write bytes of decoded base64 to stream
End With
oStream.SaveToFile Server.Mappath ("./tmp_08221_1.png"), 2
oStream.close()
set oStream = nothing
于 2021-02-08T20:02:28.247 回答