5

Após converter uma image para base64 utilizando html5 e canvas, envio a string para o ASP Clássico e lá devo salvar esta imagem em um determinado diretório. Estou utilizando o seguinte código:

    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

O cliente está desta forma:

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

O objetivo é redimensionar a imagem, gerar o código base64 e enviar para o servidor. No servidor eu converto o base64 em imagem e salvo ela em um diretório específico. Está tudo certo se não fosse pelo fato de estar gravando uma imagem preta. Percebi que a imagem original tem 1.406 bytes e após salvar fica com 691 bytes.

Alguém já passou por isso?

Grato.

2
  • Já que os arquivos são pequenos, tem como postar um hex dump do arquivo original e do arquivo corrompido?
    – user25930
    Commented 4/06/2015 às 10:14
  • Seu files[0].type ta retornando o que no javascript quando tu executa? Commented 5/06/2015 às 13:51

2 Respostas 2

0
+100

Onaiggac eu tentei usar o seu código, porém este servidor que eu uso não é tecnologia microsoft e faz muito tempo que não trabalho com servidor asp-classic, mas pelos poucos testes que fiz o problema parece ser no front-end e não no back-end.

De qualquer forma eu modifiquei o código (para funcionar no meu servidor local), troquei isto bStream.type = adTypeBinary por bStream.type = 1 e bStream.SaveToFile("C:\fotos\imagem.jpg", adSaveCreateOverWrite) por bStream.SaveToFile("C:\ASP\www\imagem.jpg", 2), não acho que faça diferença, mas não custa testar

O código completo ficou assim (funcionou perfeitamente):

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
%>

Funcionou perfeitamente, usei um HTML de exemplo:

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>

Se este código funcionar para ti então realmente o problema é no front-end e você deverá editar a sua pergunta e adicionar o html e javascript (acredito que seja algo com canvas que você esteja manipulando)

Atualização

Efetuei o teste, o problema ocorre quando você envia data:image/jpeg;base64, junto, você deve usar String.replace para remover isto e deixar apenas o base64, o seu código deveria ficar algo como:

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

Um exemplo funcional seria:

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

Atualização 2

Apesar de não estar no escopo da pergunta, o autor detectou o problema, era com o FileReader. O FileReader necessita do evento onload antes de iniciar o envio para o servidor, um exemplo de como deve ficar o código:

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>
5
  • Adicionei o código front-end que estou utilizando. Alterei meu código back-end como o proposto mas o resultado foi o mesmo.
    – Onaiggac
    Commented 5/06/2015 às 13:05
  • @Onaiggac atualizei a resposta, veja se lhe ajuda.
    – Syzoth
    Commented 5/06/2015 às 18:39
  • A linha Mid(base64String, InStr(base64String, ",") + 1) já tem o propósito de remover aquele início.
    – Onaiggac
    Commented 5/06/2015 às 20:43
  • Consegui resolver. A rotina js e asp estavam todas certas, porém eu executava a rotina js num momento errado. Eu tenho que executar dentro do método onload do objeto FileReader. Vou considerar sua resposta como certa por ter colocado um exemplo completo e funcional.
    – Onaiggac
    Commented 5/06/2015 às 20:44
  • @Onaiggac Otimo trabalho, parabéns por ter encontrado o problema sozinho e obrigado pela gratificação. Note que eu editei a resposta.
    – Syzoth
    Commented 5/06/2015 às 21:45
0

Já tentou trocar

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

por

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

E em último caso

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

Tenta:

' 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)
2
  • Sem sucesso. A primeira proposta gera o mesmo resultado e a última gera um erro.
    – Onaiggac
    Commented 5/06/2015 às 12:57
  • @Onaiggac coloquei outra solução, fique atento a mudança dos type durante o processo Commented 5/06/2015 às 13:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .