项目本地的图片转为base64

最新推荐文章于 2025-03-14 11:14:44 发布

入门小白~

最新推荐文章于 2025-03-14 11:14:44 发布

阅读量249

点赞数

文章标签：图片转换 Base64编码异步处理 JavaScript Canvas

本文链接：https://blog.youkuaiyun.com/qq_52352251/article/details/125786112

版权

这段代码演示了一个将图片URL异步转化为Base64编码的函数。通过创建Image对象，设置src属性加载图片，然后利用canvas的toDataURL方法将图片转换为指定质量的PNG格式Base64字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// imageUrlToBase64
export async function imageUrlToBase64(url) {
    return new Promise(function(resolve, reject) {
      // 一定要设置为let，不然图片不显示
      const image = new Image()
      image.src = url
      let dataURL = ''
      // image.onload为异步加载
      image.onload = () => {
        var canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var quality = 0.8
        // 这里的dataurl就是base64类型
        dataURL = canvas.toDataURL('image/png', quality)
        resolve(dataURL)
      }
    })
  }

imageUrlToBase64(item.urls).then(res => {
       this.device_info.ico = res;
})