Javascript – How to save canvas image using classic ASP

asp-classicbase64html5-canvasjavascript

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.

Best Answer

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
Related Topic