JS实现图片元素转BASE64编码的简单示例

/**
* 将指定元素对象转换为 Base64 格式
* @param {HTMLImageElement|String} img - 图片元素（如通过 document.querySelector 获取）或者选择器
* @param {Object} ps - 额外参数
* @param {Number} ps.scale - 缩放，默认 1
* @param {Boolean} ps.withGray - 是否进行灰度处理，默认 true
* @param {String} ps.format - 图片格式，默认 image/jpeg
* @param {Boolean} ps.natural - 是否使用图片元素的原始尺寸，默认 true
* @returns {String}
*/
function imgToBase64(img, ps={}) {
    if(typeof(img)==='string')  img = document.querySelector(img)
    if(Object.prototype.toString.call(img) != '[object HTMLImageElement]')
        throw Error(`参数 img 必须是一个有效的 HTMLImageElement 对象或选择器`)

    ps = Object.assign({scale:1.0, withGray:true, format: "image/jpeg", natural:true}, ps)
    let canvas = document.createElement("canvas")
    let ctx = canvas.getContext("2d")
    let width = ps.natural? img.naturalWidth : img.width
    let height = ps.natural? img.naturalHeight : img.height

    canvas.width = width * ps.scale
    canvas.height = height * ps.scale
    ctx.drawImage(img, 0, 0, width, height, 0, 0, canvas.width, canvas.height)

    //灰度处理，一定程度上使得图片内字符更加清晰
    if (ps.withGray) {
        let imgD = ctx.getImageData(0, 0, canvas.width, canvas.height)
        let len = canvas.width * canvas.height * 4
        for (let i = 0; i < len; i += 4) {
            let gray = Math.floor((imgD.data[i] + imgD.data[i + 1] + imgD.data[i + 2]) / 3)
            imgD.data[i] = imgD.data[i + 1] = imgD.data[i + 2] = gray > 100 ? gray : 0
        }

        ctx.putImageData(imgD, 0, 0)
    }

    return canvas.toDataURL(ps.format)
}

imgToBase64(".logo")
// 缩放 0.5 倍
imgToBase64(document.querySelector(".logo"), {scale:0.5})

base64 (url) {
      return new Promise((resolve) => {
        const image = new Image()
        // 先设置图片跨域属性
        image.crossOrigin = 'Anonymous'
        // 再给image赋值src属性，先后顺序不能颠倒
        image.src = url
        image.onload = function () {
          const canvas = document.createElement('CANVAS')
          // 设置canvas宽高等于图片实际宽高
          canvas.width = image.width
          canvas.height = image.height
          canvas.getContext('2d').drawImage(image, 0, 0)
          // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）
          const dataURL = canvas.toDataURL('image/jpeg')
          resolve(dataURL)
        }
        image.onerror = () => {
          resolve({ message: '相片处理失败' })
        }
      })
    },

async mounted () {
    // this.init()
    const url = await this.base64('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg')
    console.log(url)
  },

 const newImgOBj = await Promise.all(this.imgOBj.map(async (item) => {
      return {
        name: item.name,
        img: await this.base64(item.img)
      }
    }))
    console.log(newImgOBj)