本地/在线图片转base64

1.本地上传图片转base64

当我们想将本地上传的图片转为base64使用时，可以使用以下方法：

<input type="file" multiple onchange="handleChange(event)" accept="image/png,image/jpeg,image/gif,image/jpg"/>

async function handleChange(event) {
    const files = event.target.files
    if (!files.length) {
        return
    }
    for (const file of files) {
        const { base64 } = await getImageToBase64(file)
        console.log(base64)
    }
}

function getImageToBase64(file) {
    return new Promise((resolve, reject) => {
        const fd = new FileReader()
        fd.readAsDataURL(file)
        fd.onload = (e) => {
          const target = e.target || null
          if (target && target.result) {
            const base64 = target.result
            resolve({ base64 })
          }
        }
        fd.onerror = reject
      })
    }

可选择一张或多张进行上传转换。

2.在线图片转base64(使用canvas绘制)

当我们想将在线url图片链接转换为base64时，对图片的要求不高时，可以使用如下方法：

<canvas id="canvas" style="display: none;"></canvas>

// 图片url
const onlineUrl = 'https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/leancloud-assets/5d70fd6af940df373834.png~tplv-t2oaga2asx-image.image'

function getImageUrlTobase64(url) {
    const image = document.createElement('img')
    const canvas = document.getElementById('canvas')
    image.crossOrigin = 'Anonymous'
    image.onload = function() {
        canvas.width = image.width
        canvas.height = image.height
        const ctx = canvas.getContext('2d')
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.drawImage(image, 0, 0, canvas.width, canvas.width)
        const dataURL = canvas.toDataURL('image/png', 1)
        console.log(dataURL)
    }
    image.onerror = function(err) {
          console.log(err)
    }
    image.src = url
}

getImageUrlTobase64(onlineUrl)

缺陷：

1.当绘制图像大小与原图像素不一致时图片会变模糊。

2.原图如果为纯色背景，背景会被填充为黑色。

3.在线图片下载转base64

当我们想将在线url图片链接转换为base64时，想要保持原图清晰度，可以使用如下方法：

const onlineUrl = `https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/leancloud-assets/0d614af263aa63aa6a77.png~tplv-t2oaga2asx-image.image`

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

getImageUrlDownloadToBase64(onlineUrl).then((res) => {
    console.log(res)
}).catch((err) => {
    console.log(err)
})