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