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 see

Answer 1

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 2

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