[js] imgDom、blob、base64、url之间的转换

function imgDom2base64(temp1) {
    let img = temp1;
    let Eurl = new URL(img.src);

    let url = Eurl.href;
    for (let i of ["jpg", "png", "gif", "svg", "bmp", "ico", "webp"]) {
        if (Eurl.pathname.includes(i)) {
            url = Eurl.origin + Eurl.pathname;
        }
    }
    url2Blob(url).then((blob) => {
        blob2Base64(blob).then((str) => {
            console.log(str)
        })
    })
}

// tool
/**
 * 
 * @param {str} url 
 * @returns  {Promise<Boolean|any>} 
 */
function url2Blob(url) {
    return new Promise((resolve, reject) => {
        window.fetch(url).then(
            (fulfilled) => {
                fulfilled.blob().then(
                    (blob) => { resolve(blob); },
                    (rejected) => { reject(rejected); }
                )
            },
            (rejected) => { reject(rejected); });
    })
}
/**
 * 
 * @param {Boolean} blob 
 * @returns {Promise<str|any>}
 */
function blob2Base64(blob) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => {
            const base64 = reader.result?.toString() || '';
            resolve(base64);
        });
        reader.addEventListener('error', () => {
            reject(new Error('message'));
        });
        reader.readAsDataURL(blob);
    });
}

/**
 * 
 * @param {str} blob 
 * @returns {str}
 */
function base642BUrl(data) {
    var parts = data.split(';base64,'),
        contentType = parts[0].split(':')[1],
        raw = window.atob(parts[1]),
        length = raw.length,
        arr = new Uint8Array(length);
    for (var i = 0; i < length; i++) {
        arr[i] = raw.charCodeAt(i);
    }
    var blob = new Blob([arr], { type: contentType });
    return URL.createObjectURL(blob);
};

/**
 * 
 * @param {str} url 
 * @returns {str|any}
 */
function url2Base64(url, type = 'image/jpeg') {
    return new Promise((resolve, reject) => {
        const img = new Image()
        const canvas = document.createElement('canvas');
        img.crossOrigin = '*';
        img.onload = function () {
            const width = img.width, height = img.height;
            canvas.width = width;
            canvas.height = height;

            const ctx = canvas.getContext('2d');
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, 0, 0, width, height);
            const base64 = canvas.toDataURL(type);
            resolve(base64);
        };
        img.onerror = function () {
            reject(new Error('message'));
        };
        img.src = url;
    });
}

/**
 * 
 * @param {Boolean} blob 
 * @returns {str}
 */
function blob2BUrl(blob) {
    return URL.createObjectURL(blob);
}