blob(url)转成base64

最新推荐文章于 2025-04-10 16:15:11 发布

原创最新推荐文章于 2025-04-10 16:15:11 发布 · 7.4k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一种将Element-UI上传组件返回的blob加密URL转换为Base64编码的方法，通过创建Image对象并利用Canvas API实现图片的加载与转换。

前提：用的element-ui的上传组件，人家回我的是blob加密的http

（如：blob:http://localhost:8080/b878edea-e649-4f8d-b723-c3f25454141b）

现在开始转base64

      const image = new Image() // 新建一个img标签（还没嵌入DOM节点)
      //blob:http://localhost:8080/b878edea-e649-4f8d-b723-c3f25454141b
      image.src = file.url;
      image.onload = () => {
        const canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        const context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height);
        let imgUrl = canvas.toDataURL() //图片的base64地址
        console.log(imgUrl);
     }

toDataURL:toDataURL