Question

我有点卡在这里。我知道我可以使用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元素，但我似乎无法找到一个很好的方法来进行base64解码它，或者甚至将它输出为二进制文件...我想我听说经典的ASP在做base64解码方面并不擅长，而在另一个测试中我确实发现了一个做base64解码的函数，但是我不能不知道它是否真的有效，但确实需要很长时间才能运行。我也在这里找到了这个链接：base64 image decoder for ASP classic，但我想这是一个微软不建议使用的32位组件...我想我在这里寻找有关保存html5画布图像的建议的社区到服务器上。

Answer 1

您可以使用指定通过bin.base64实例创建的DomDocument数据类型的XML元素来编码/解码Base64数据。
然后，您可以使用Stream对象将获取的二进制文件保存到磁盘。
这两个库都支持64位。假设您发送的内容将在服务器端的请求集合（经典的post post方法，没有json等）中可用，以下代码可以解决问题，或者最糟糕的是，我确信这可以为您提供见解。

的 saveImage.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

Answer 2

我以为我会分享一个解决方案。

$(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);
                });
 });

in 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
%>

Answer 3

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

        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

如何使用经典ASP保存画布图像？

3 个答案: