How to save canvas image using classic ASP?

Question

I'm a bit stuck here. I know that I can use the canvas.toDataURL to produce a base64 encoded string to pass to a classic ASP page on my server. But the problem I can't seem to find an answer to is how to process this data so I can save it someplace on my server.

So with this snippet of code on my HTML page, I pull the canvas data (I pulled this from another post here at 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);
}); 

But I'm unclear now what to do with the data once I'm on the server side... I can pull the Request.Form element, but I can't seem to find a good way to either base64 decode it, or even output it as a binary file... I guess I've heard that classic ASP isn't any good at doing base64 decoding, and in another test I did find a function that did the base64 decode, but I couldn't tell if it really worked, but it did take a long time to run. I also found this link here: base64 image decoder for ASP classic, but I guess this is a 32bit component that Microsoft doesn't recommend using... I guess I'm looking to the community here for suggestions on saving out an html5 canvas image onto the server.

Answer 1

You could use an XML element specifying bin.base64 data type that created through a DomDocument instance to encoding / decoding Base64 data.
Then you can save obtained binary to disk using a Stream object.
Both of these libraries are 64 bit supported. Assuming the content you sent will be available in a Request collection (classic post methods without json etc.) on the server-side, following code solves the problem or at worst I'm sure that gives you insight.

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

just thought I'd share a solution to this.

$(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">

I was actually getting the image data as a snapshot from a webcam canvas.toDataURL, but it works for just an img tag on a page as well

In 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

my answer is based on the first answer, with some modifications that made it actually work: first, in the client side we use the following function:

        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");
        });   
    }

and in the asp server side we use the following code:

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