前端实现图片转Base64-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端实现图片转Base64。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

废话不多说，直接上代码

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)
  },

片地址看看是否成功

前端图片转base64,javascript,html5

但是，一般我们在做这样的需求前，处理的图片肯定不止一张，接下来就要批量处理，但是这个方法是异步，我们要将一个数组内的每个对象的地址都转成base64,才算真正完成我们的功能。前端一般接收到后端的数据一般是这种格式。

前端图片转base64,javascript,html5

但是我们正常使用map函数遍历去将图片地址转成base64，上代码：

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

打印一下看结果发现我们的图片地址已经变成了base64编码。

前端图片转base64,javascript,html5