12

Estoy generando un canvas dentro de mi aplicación, luego me gustaría subir lo que se cree en ese canvas como una imagen png a mi servidor. El problema que estoy teniendo es que se sube, con peso obviamente pero la imagen no se ve.

El canvas queda en base 64

var img_b64 = fotoFirmaService.getImagenFirma(); //base64 de la imagen
var png = img_b64.split(',')[1];
var the_file = new Blob([window.atob(png)], { type: 'image/png', encoding: 'utf-8' });
var imagen_firma = new File([the_file], 'imagen_firma.png', { type: 'image/png' });

Al imprimir el valor de imagen_firma obtengo :

File {
    lastModified : 1489088454413
    lastModifiedDate : Thu Mar 09 2017 16:40:54 GMT-0300 (CLT)
    name : "imagen_firma.png"
    size : 16926
    type : "image/png"
    webkitRelativePath : ""
}

Sin embargo, la imagen en mi servidor queda vacía. Hago el mismo procedimiento con input tipo file, pero se suben correctamente. Imprimi la estructura de esos archivos y son idénticas a este File pero en este caso no funciona.

EDIT

Es con este codigo que subo el archivo a mi servidor :

var payload = new FormData();
payload.append('file', imagen_firma);

$http({
    method: 'POST',
    url: 'dsaasas/UploadImage/' + imagen_firma.name,
    data: payload,
    headers: { 'Content-Type': undefined },
    transformRequest: angular.identity
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
    console.log("bien");
    console.log(response);
}, function errorCallback(response) {
    console.log(response);
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

Y este es mi codigo C#, esta con WCF

public string UploadImage(string fileName)
    {
        try
        {
            HttpPostedFile file = HttpContext.Current.Request.Files[0];
            if (file == null)
                return null;
            string targetFilePath = WebConfigurationManager.AppSettings["FilePath"] + fileName;
            file.SaveAs(targetFilePath);
            return "succ   " + file.FileName.ToString();

            //return fileName;
        }
        catch (Exception ex)
        {
            return ex.Message + " - " + ex.InnerException;

        }
    }
11
  • qué lenguaje tienes en el lado del cliente, y cómo mandas la petición al servidor?
    – fredyfx
    Commented el 9 mar. 2017 a las 19:50
  • en el lado de cliente estoy con javascript, ahora actualizo el codigo de como envio al servidor el archivo.
    – sioesi
    Commented el 9 mar. 2017 a las 19:51
  • olvidé preguntarte, qué lenguaje usas al lado del server, y por qué transformar el archivo a base64 y de ahí a un blob para construir un archivo que posteriormente será agregado en el FormData como file para enviarlo al server?
    – fredyfx
    Commented el 9 mar. 2017 a las 19:57
  • estoy utilizando c# en el lado del servidor. La verdad es que lo que necesito es que ese string en base64 que es una imagen, transformarlo a un File para subirlo al servidor. Quizas no sea la manera correcta de hacerlo y es por eso que acude a la comunidad a ver si me podian echar una mano
    – sioesi
    Commented el 9 mar. 2017 a las 19:58
  • 2
    ya te entendí <meme de squirtle> vamo a responder </meme de squirtle> :D C# con ASPnet MVC o webforms?
    – fredyfx
    Commented el 9 mar. 2017 a las 20:02

2 respuestas 2

9

He encontrado 2 posibles soluciones:

  • Corregir el código binario que es pasado al Blob:

    Ejemplo:

    function fixBinary (bin) {
      var length = bin.length;
      var buf = new ArrayBuffer(length);
      var arr = new Uint8Array(buf);
      for (var i = 0; i < length; i++) {
        arr[i] = bin.charCodeAt(i);
      }
      return buf;
    }
    
    var img_b64 = fotoFirmaService.getImagenFirma(); //base64 de la imagen
    var png = img_b64.split(',')[1];
    var binary = fixBinary(window.atob(png));// <-- Usamos la fn "fixBinary"
    var the_file = new Blob([binary], {type: 'image/png'});// <-- Sacamos el encode
    var imagen_firma = new File([the_file], 'imagen_firma.png', { type: 'image/png' });
    

    Fuente: SOen - encode/decode image with base64 breaks image

  • Usar canvas.toBlob() (ver Polyfill)

    Ejemplo:

    /// Service fotoFirmaService
    
    // Creamos un nuevo método en servicio "fotoFirmaService"
    // el cual devolverá directamente el Blob
    getImagenFirmaBlob: function(format, quality) {
      var response;
      // "canvas" debe ser un "HTMLCanvasElement"
      canvas.toBlob(function(blob){
        response = blob;
      }, format, quality);
      return response;
    }
    
    /// Controller
    
    // Usando el nuevo método "getImagenFirmaBlob"
    var the_file = fotoFirmaService.getImagenFirmaBlob("image/png"); //blob de la imagen
    var imagen_firma = new File([the_file], 'imagen_firma.png');
    
6
  • 1
    la segunda opcion me ayudo! Muchas gracias!!!
    – sioesi
    Commented el 13 mar. 2017 a las 18:27
  • 1
    @sioesi, si miras en detalle, el método toBlob es prácticamente la primer solución, con la diferencia que eventualmente puede llegar a ser nativo.
    – Marcos
    Commented el 13 mar. 2017 a las 18:30
  • 1
    Me fui directamente a la segunda, porque habia intentado algo muy similar pero de m ala forma, con est se soluciono mi problema!
    – sioesi
    Commented el 13 mar. 2017 a las 18:49
  • 2
    ahora sí hermano @Sioesi ! a seguir con todo el power 2.0! gracias @MarcosGallardo!
    – fredyfx
    Commented el 14 mar. 2017 a las 0:17
  • 1
    saludos amigo @fredyfx!
    – sioesi
    Commented el 14 mar. 2017 a las 11:44
6
+100

Tambien aplique otra solución que trabajo bien para mi :

var blob = dataURItoBlob(fotoFirmaService.getImagenFirma());
var imagen_firma = new File([blob], 'imagen_firma.jpg', { type: 'image/jpg' });

Y la funcion dataURItoBlob :

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], { type: mimeString });
}
1
  • como hago que se muestre la imagen resultante en un html?
    – Stevn
    Commented el 19 jun. 2018 a las 19:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.