美文网首页
JS 实现 base64、url 和 blob 之间相互转换的三

JS 实现 base64、url 和 blob 之间相互转换的三

作者: Cherry丶小丸子 | 来源:发表于2024-03-07 19:03 被阅读0次
    url 转 base64
    原理: 利用 canvas.toDataURL 的 API 转化成 base64
    function urlToBase64(url) {
        return new Promise ((resolve, reject) => {
            let image = new Image();
            image.onload = function() {
                let canvas = document.createElement('canvas');
                canvas.width = this.naturalWidth;
                canvas.height = this.naturalHeight;
                // 将图片插入画布并开始绘制
                canvas.getContext('2d').drawImage(image, 0, 0);
                // result
                let result = canvas.toDataURL('image/png')
                resolve(result);
            };
            // CORS 策略,会存在跨域问题 https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
            image.setAttribute('crossOrigin', 'Anonymous');
            image.src = url;
            // 图片加载失败的错误处理
            image.onerror = () => {
                reject(new Error('urlToBase64 error'));
            };
        }
    }
    
    
    使用:
    let imgUrL = `http://XXX.jpg`
    urlToBase64(imgUrL).then(res => {
        // 转化后的base64图片地址
        console.log('base64', res)
    })
    
    blob 转 url
    原理: 利用 URL.createObjectURL 为 blob 对象创建临时的 URL
    let url = URL.createObjectURL(blob)
    
    blob 转 base64
    原理: 利用 fileReader 的 readAsDataURL,将 blob 转为 base64
    blobToBase64(blob) {
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            fileReader.onload = (e) => {
                resolve(e.target.result);
            };
            // readAsDataURL
            fileReader.readAsDataURL(blob);
            fileReader.onerror = () => {
                reject(new Error('blobToBase64 error'));
            };
        });
    }
    
    使用:
    blobToBase64(blob).then(res => {
        // 转化后的base64
        console.log('base64', res)
    })
    
    base64 转 Blob
    原理: Uint8Array,ArrayBuffer 构造
    function base64toBlob(dataurl) {
        let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }
    
    或者
    
    function baseToBlob (b64) {
        const byteCharacters = atob(b64)
        const byteNumbers = new Array(byteCharacters.length)
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        const blob = new Blob([byteArray], { type: 'image/jpeg' })
        return blob
    }
    //需要你手动去掉 data:image/png;base64,
    
    使用:
    let base64Str = "data:image/png;base64,iVBORw0KGgoA.....AAANSUhEUgAA"
    dataURLtoBlob(base64Str)
    
    或者,利用 fetch(推荐)
    fetch(`data:${type};base64,${base64}`).then(res => res.blob())
    
    字符串 和 base64 之间互转
    原理:atob 和 btoa
    
    let str = btoa("Dsgsg1234567890-=[];'m,,./")
    console.log(str)  //RHNnc2cxMjM0NTY3ODkwLT1bXTsnbSwsLi8=
    console.log(atob(str))  //Dsgsg1234567890-=[];'m,,./
    
    blob 转 File
    function blobToFile(blob, name) {
        return new File([blob], name + '.png', { type: blob.type });
    }
    

    相关文章

      网友评论

          本文标题:JS 实现 base64、url 和 blob 之间相互转换的三

          本文链接:https://www.haomeiwen.com/subject/lmxezdtx.html