Saving Base64 Image with ADODB.Stream

Question

Saving Base64 Image with ADODB.Stream

Navigation

#1 by (0 votes)
#2 by (0 votes)

5

After converting an image to base64 using html5 and canvas, I send the string to Classic ASP and there I should save this image to a certain directory. I'm using the following code:

    base64String = Trim(Request.Form("base64"))

    Set tmpDoc = Server.CreateObject("MSXML2.DomDocument")
    Set nodeB64 = tmpDoc.CreateElement("b64")
    nodeB64.DataType = "bin.base64"
    nodeB64.Text = Mid(base64String, InStr(base64String, ",") + 1)

    set bStream = server.CreateObject("ADODB.stream")

    bStream.type = adTypeBinary

    call bStream.Open()

    call bStream.Write(nodeB64.NodeTypedValue)

    call bStream.SaveToFile("C:\fotos\imagem.jpg", adSaveCreateOverWrite)

    call bStream.close()
    set bStream = nothing

The client looks like this:

<form method="post">
    <input type="text" id="base64" name="base64" value="" />
</form>
<canvas id="c"></canvas>

<script type="text/javascript">
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0);

    c.width = 50;
    c.height = 50;

    var ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0, 50, 50);

    $("#base64").val(c.toDataURL(files[0].type));
</script>

The goal is to resize the image, generate the base64 code, and send it to the server. On the server I convert base64 to image and save it to a specific directory. It's all right if it were not for the fact that it was recording a black image. I noticed that the original image has 1,406 bytes and after saving it is 691 bytes.

Has anyone ever been through this?

Thank you.

imagem asp

asked by anonymous 27.05.2015 / 19:42

2 answers

0

~~Have you tried changing~~

Server.CreateObject("MSXML2.DomDocument")
Set nodeB64 = tmpDoc.CreateElement("b64")

by

Server.CreateObject("Msxml2.DOMDocument.3.0")
Set nodeB64 = tmpDoc.CreateElement("base64")

And in the latter case

bStream.charSet = "us-ascii"
bStream.position = 0

Try:

' type binário
bStream.type = 1

call bStream.Open()
call bStream.Write(nodeB64.NodeTypedValue)

' muda type pra text
bStream.position = 0
bStream.type = 2
bStream.charSet = "us-ascii"

call bStream.SaveToFile("C:\fotos\imagem.jpg", adSaveCreateOverWrite)

04.06.2015 / 00:30

Changed data in the database is not displayed in the PrimeFaces DataTable google API - gcalcli - error while executing in a script

score 0 · Accepted Answer

Onaiggac I tried to use your code, however this server I use is not microsoft technology and it has been a long time since I worked with asp-classic server, but by the few tests I did the problem seems to be in the front end and not on the back end.

In any case, I have modified the code (to work on my local server), I changed this bStream.type = adTypeBinary by bStream.type = 1 and bStream.SaveToFile("C:\fotos\imagem.jpg", adSaveCreateOverWrite) by bStream.SaveToFile("C:\ASP\www\imagem.jpg", 2) , I do not think it makes a difference, but it does not cost to test

The complete code looks like this (worked perfectly):

save.asp

<%
base64String = Trim(Request.Form("base64"))

Set tmpDoc = Server.CreateObject("MSXML2.DomDocument")
Set nodeB64 = tmpDoc.CreateElement("b64")
nodeB64.DataType = "bin.base64"
nodeB64.Text = Mid(base64String, InStr(base64String, ",") + 1)

set bStream = server.CreateObject("ADODB.stream")

bStream.type = 1

call bStream.Open()

call bStream.Write(nodeB64.NodeTypedValue)

call bStream.SaveToFile("C:\ASP\www\imagem.jpg", 2)

call bStream.close()
set bStream = nothing
%>

It worked perfectly, I used an example HTML:

form.asp

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ido-8859-1">
    <title>Test</title>
</head>
<body>
<form method="POST" action="save.asp">
    <textarea name="base64">/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCADAAQADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWiVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADT0lEQVR42s2Xy08TYRTFDRHCw8LwstCWjlNeooBt59WZYWpfGKMsJBGIC3RjIrvCyr1L/xZlR0hcsqIrSEha6IdUMSL/Bd6TwIT0m5kNGWXxC7f33HPPbYeScOfi4uK/crsPkJ/IpppStwFqfubmPt9FhmbsZ+eyDYCan7m5z3eRbdknpWLpEKDmZ27uc4rUTMqkj2tbSSp/6GcdvaydPS6VSlWAWk2rIdLOlZRy5gZpv9186MGH3chAFneAJmv7ZsZszFlzx4Zu/NAUrTX/NF8pFApVQPXu82fPw6Q16F0xN6Dpii40+SrU64eG3chAFncADZxks9nDXC5XtUyLZbTMy3K5vEJLdsFGeWPZMqz3tIRhxg1oNLOyXl5fvvKhtjLWuysfMpDFHZDRM8e2bVeBaZpHqqzWivni2729vUekJ+YL8290VcdxR5hxAz765Or5bH5t8+um4uVDFv8IVI3RgiowDKNGJian5EY6mf4JUOuazqBhxg1oNFNX0oqvD1ncAXJaZrquV6/QNK2mKuqRIisMoEYPWjOcT/X3IYv/FiRTTFGU6r8AWdwBszOzLJlM1qieCBJkIIs7YPrxNCPqqIMEGQR/wNTDKQYCCvbMcYTJ8UkGAgr2zHGE0dExBvzMiXjCToijp8T55etu1MRZE+fQ+B18jiNIDyQGvMKlEWlVikuHkiidEA30bMMWUMN3HfSKuWKI38PnOEJ8JM6Am0mMit1iTPw1Njq2E4/Ha9fmWogJUKvVZsbHx7+Joniw9HrpAzR+F5/jCLFojAE3U87OhUqF0setra3ZaDR66DY3Ehn5hP7iq8U1es29e68cRxgeGmbAw9hC9M4X5wWaqTfPxYZiUmQociLGxR167fbsPXMcITwYZsDPnFEzPW5z9HjK4fvh7/RH5rOH1zPHEQb6BxjwM6tpVXCbi0ViX9AzdGPVw+uZ4wh9Qh8DfmY5JQu9Qi83N9g/eIC+bdmmh9czxxF6unsY8DI2/9Y39ccue+3+fj7HEUJdIQZQBwef4whdnV0MBBTsmeMIHe0dDAQVzOfwj6DS1tpWD3WGToV7wlkQYDcykMUdsPBiYYUuq7Teba3TEAsC7EYGsrgDiC4iQUwETAJZt+a/47+rJ1iPKnkHqgAAAABJRU5ErkJggg==</textarea>
    <input type="submit">
</form>
</body>
</html>

If this code works for you then the problem is really the front end and you should edit your question and add the html and javascript (I think it's something with canvas you're manipulating)

Update

I've done the test, the problem occurs when you send data:image/jpeg;base64, together, you should use String.replace to remove this and leave only base64, your code should look something like:

$("#base64").val(c.toDataURL(files[0].type).replace(/^data[:]image\/[a-z]+;base64,/, ""));

A working example would be:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ido-8859-1">
    <title>Test</title>
</head>
<body>
<form method="POST" action="save.asp">
    <textarea name="base64" id="base64"></textarea>
    <input type="submit">
</form>
<img id="i" src="15258056.png">
<canvas id="c"></canvas>

<script type="text/javascript">
window.onload = function () {
    var base64 = document.getElementById("base64");
    var img = document.getElementById("i");
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0);

    c.width = 50;
    c.height = 50;

    var ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0, 50, 50);

    base64.value = c.toDataURL("image/jpeg").replace(/^data[:]image\/[a-z]+;base64,/, "");
};
</script>
</body>
</html>

Update 2

Although not in the scope of the question, the author detected the problem, it was with FileReader . The FileReader requires the onload event before starting to send it to the server, an example of how the code should be:

JavaScript:

function getImage() {
    var file   = document.getElementById("file").files[0];
    var reader = new FileReader();

    reader.onload = function(e) {
        var img = new Image();
        img.onload = function() {
            resizeImage(img);
        };
        img.src = reader.result;
    }

    reader.readAsDataURL(file);
}

function resizeImage(img) {
    var base64 = document.getElementById("base64");
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0);

    c.width = 50;
    c.height = 50;

    var ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0, 50, 50);

    base64.value = c.toDataURL("image/jpeg").replace(/^data[:]image\/[a-z]+;base64,/, "");
}

window.onload = function() {
    document.getElementById("file").onchange = getImage;
};

HTML:

<style type="text/css">
#c {
    border: 1px #c0c0c0 solid;
}
</style>

<input type="file" name="file" id="file" accept="image/*">
<form method="POST" action="save.asp">
    <textarea name="base64" id="base64"></textarea>
    <input type="submit">
</form>
<canvas id="c"></canvas>