javascript 转换图像是一个base64 con JavaScript

Posted 2021-05-04

// Opcion 1: Canvas

/**
 * Convierte elemento HTML img a base64 basado en su src
 * @method getBase64Image
 * @param  {[type]}       img  Elemento HTML
 * @param  {[type]}       type Tipo de imagen a convertir, defecto jpeg
 * @return {[type]}            Imagen codificada en base64
 */
function getBase64ImageCanvas(img, type) {
    var canvas = document.createElement("canvas"),
    ctx,
    dataURL;

    if (typeof type != "undefined" && type == 'png') {
        type = 'image/png';
    } else {
        type = 'image/jpeg';
    }

    canvas.width = img.width;
    canvas.height = img.height;
    ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    // toDataURL usa por defecto image/png.
    // En este ejemplo se usa por defecto image/jpeg
    // por ser mas comun su uso.
    dataURL = canvas.toDataURL(type);

    return dataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
}

// Ejemplo de uso opcion 1
var base64= '',
    type = 'png', // defecto jpeg
    img;

img = document.getElementById("my-image-id-name");
base64 = getBase64ImageCanvas(img);
console.log(base64);

// Opcion 2: FileReader

/**
 * Convierte url img a base64
 * @method getBase64Image
 * @param  {[type]}       url      URL de imagen a convertir
 * @param  {Function}     callback Funcion que tramitara el string en base64 convertido
 */
function getBase64ImageFileReader(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result.replace(/^data:image\/(png|jpg|jpeg);base64,/, ""));
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

// Ejemplo de uso opcion 2
// Cuidado porque usa una peticion asincrona
// para devolver el base64.
getBase64ImageFileReader('http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png', function(base64) {
    console.log(base64);
});

// Opcion 2 extraida de: http://jsfiddle.net/handtrix/YvQ5y/