imagen - image to data url javascript

CONVERTIR url de imagen a Base64

Question

Usando un archivo de imagen, obtengo la url de una imagen, que debe enviarse a un servicio web. Desde allí, la imagen debe guardarse localmente en mi sistema.

El código que estoy usando:

var imagepath = $("#imageid").val();// from this getting the path of the selected image

that var st = imagepath.replace(data:image/png or jpg; base64"/"");

¿Cómo convertir la URL de la imagen a BASE64?

Answer 1

Este es tu html-

    <img id="imageid" src="">
    <canvas id="imgCanvas" />

Javascript debería ser-

   var can = document.getElementById("imgCanvas");
   var img = document.getElementById("imageid");
   var ctx = can.getContext("2d");
   ctx.drawImage(img, 10, 10);
   var encodedBase = can.toDataURL();

''coddedBase'' contiene codificación de base64 de la imagen.

Answer 2

Ver esta respuesta: https://.com/a/20285053/5065874 por @HaNdTriX

Básicamente, implementó esta función:

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open(''GET'', url);
    xhr.responseType = ''blob'';
    xhr.send();
}

Y en tu caso, puedes usarlo así:

toDataUrl(imagepath, function(myBase64) {
    console.log(myBase64); // myBase64 is the base64 string
});

Answer 3

HTML

<img id=imageid src=https://www.google.de/images/srpr/logo11w.png>

JavaScript

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image//(png|jpg);base64,/, "");
}

var base64 = getBase64Image(document.getElementById("imageid"));

Este método requiere el elemento canvas, que es perfectamente compatible .

• La referencia MDN de HTMLCanvasElement.toDataURL() .
• Y la documentación oficial W3C .

Answer 4

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type=''text/javascript''>
  function encodeImageFileAsURL() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64

        var newImage = document.createElement(''img'');
        newImage.src = srcData;

        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
        console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
      }
      fileReader.readAsDataURL(fileToLoad);
    }
  }
</script>

Answer 5

let baseImage = new Image;
baseImage.setAttribute(''crossOrigin'', ''anonymous'');
baseImage.src = your image url

var canvas = document.createElement("canvas");
  canvas.width = baseImage.width;
  canvas.height = baseImage.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(baseImage, 0, 0);
  var dataURL = canvas.toDataURL("image/png");

Información adicional sobre "Imágenes habilitadas con CORS": documentación de MDN