Saving Base64 Image with ADODB.Stream

Asked

Viewed 926 times

5

After converting an image to Base64 using Html5 and canvas, send the string to ASP Classic and there I must save this image in 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 is 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 in a specific directory. It’s all right if it wasn’t for the fact that you’re recording a black image. I realized that the original image has 1,406 bytes and after saving is 691 bytes.

Someone’s been through it?

Grateful.

image asp

  • Since the files are small, it has how to post an Hex dump from the original file and the corrupted file?

  • Your files[0]. type is returning what in javascript when you run?

2 answers

0

Ever tried to trade 

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

for

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

And ultimately

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

Tries: 

' 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)

  • No success. The first proposal generates the same result and the last one generates an error.

  • @Onaiggac put another solution, stay tuned to change the type during the process

0


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

Anyway I modified the code (to work on my local server), I changed this bStream.type = adTypeBinary for bStream.type = 1 and bStream.SaveToFile("C:\fotos\imagem.jpg", adSaveCreateOverWrite) for bStream.SaveToFile("C:\ASP\www\imagem.jpg", 2), I don’t think it makes a difference, but it doesn’t cost to test

The complete code looked like this (it 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 really is in the front end and you should edit your question and add html and javascript (I believe it is something with canvas that you are manipulating)

Updating

I performed the test, the problem occurs when you send data:image/jpeg;base64, together, you must 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 functional 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 the FileReader. The FileReader needs the event onload before starting sending to the server, an example of what the code should look like:

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>

  • I added the front-end code I am using. I changed my back-end code as proposed but the result was the same.

  • @Onaiggac updated the answer, see if it helps you.

  • The Mid(base64String, Instr(base64String, ",") + 1) line already has the purpose of removing that beginning.

  • I managed to fix it. The js and Asp routine were all right, but I was running the js routine at the wrong time. I have to run inside the onload method of the Filereader object. I will take your answer for granted by setting a complete and functional example.

  • @Onaiggac Great job, congratulations on finding the problem alone and thank you for the gratification. Note that I edited the answer.

Browser other questions tagged image asp

You are not signed in. Login or sign up in order to post.