3

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?

1

1 respuesta 1

6

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

Ejemplo

const URL = 'https://api.github.com/gists/8cd4c934fbb98e87d4c99326f609754e'

const getBase64Image = _ => (
  fetch(URL)
    .then(res => res.json())
    .then(content => content.files['grandma-medium-b64.txt'].content)
);

(async () => {
  try {
    let body = await getBase64Image()
    body = body.split(',')[1]
    const blob = new Blob([atob(body)], {
      type: 'image/jpg',
      encoding: 'utf-8'
    });
    const file = new File([blob], "Grandma on bycle")
    console.log(file)
  } catch (e) {
    console.error(e)
  }
})()

1
  • 2
    Perfecto Gustavo, era exactamente lo que necesitaba. Muchas gracias :)
    – 50l3r
    Commented el 10 mar. 2017 a las 15:24

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.