Convertir base64 imagen en “input file”

publicado por: Anonymous

Buenos Días,

Estoy realizando un aplicativo en angular que recoge un dibujo realizado en canvas para despues subirlo como imagen png al servidor.

Esta es mi función:

$scope.signContract = function(){
    var canvas = document.getElementById("pwCanvasMain");
    var Sign = canvas.toDataURL("image/png");

    ContractsFactory.Sign($scope.contratofirma._EntityId, Sign).success(function (data) {

    }).error(function (error) {
        swal("Algo ha ido mal", error.error, "error");
    });
}

introducir la descripción de la imagen aquí

El caso es que en la petición POST estoy mandado una imagen en base64 y en mi servidor necesito procesarla como una imagen bajo “$_FILE”.

¿Existe alguna manera de trasladar el base64 a un input file?

solución

Lo que puedes hacer es convertir ese base64 a Blob y posteriormente a File.

Ejemplo

_x000D_

_x000D_

const URL = 'https://api.github.com/gists/8cd4c934fbb98e87d4c99326f609754e'_x000D_
_x000D_
const getBase64Image = _ => (_x000D_
  fetch(URL)_x000D_
    .then(res => res.json())_x000D_
    .then(content => content.files['grandma-medium-b64.txt'].content)_x000D_
);_x000D_
_x000D_
(async () => {_x000D_
  try {_x000D_
    let body = await getBase64Image()_x000D_
    body = body.split(',')[1]_x000D_
    const blob = new Blob([atob(body)], {_x000D_
      type: 'image/jpg',_x000D_
      encoding: 'utf-8'_x000D_
    });_x000D_
    const file = new File([blob], "Grandma on bycle")_x000D_
    console.log(file)_x000D_
  } catch (e) {_x000D_
    console.error(e)_x000D_
  }_x000D_
})()

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *