欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js將圖片轉(zhuǎn)base64的兩種實現(xiàn)方法

 更新時間：2023年07月22日 10:37:02   作者：一枚小銀子  
這篇文章主要給大家介紹了關于js將圖片轉(zhuǎn)base64的兩種實現(xiàn)方法,Base64是網(wǎng)絡上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一,Base64就是一種基于64個可打印字符來表示二進制數(shù)據(jù)的方法,需要的朋友可以參考下

第一種：Image + canvas

const getBase64Image = src => {
    return new Promise(resolve => {
        const img = new Image()
        img.crossOrigin = ''
        img.src = src
        img.onload = function () {
            const canvas = document.createElement('canvas')
            canvas.width = img.width
            canvas.height = img.height
            const ctx = canvas.getContext('2d')
            ctx?.drawImage(img, 0, 0, img.width, img.height)
            const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
            const dataURL = canvas.toDataURL('image/' + ext)
            resolve(dataURL)
        }
    })
}

第二種：xhr + FileReader

const getBase64Image = src => {
    return new Promise(resolve => {
        let xhr = new XMLHttpRequest()
        xhr.open('get', src, true)
        xhr.responseType = 'blob'
        xhr.onload = function () {
            if (this.status == 200) {
                let blob = this.response
                let oFileReader = new FileReader()
                oFileReader.onloadend = function (e) {
                    const base64 = e.target.result
                    resolve(base64)
                }
                oFileReader.readAsDataURL(blob)
            }
        }
        xhr.send()
    })
}

總結

到此這篇關于js將圖片轉(zhuǎn)base64的兩種實現(xiàn)方法的文章就介紹到這了,更多相關js圖片轉(zhuǎn)base64內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論