前端图片转base64

在web开发中，经常需要使用图片进行展示，而常见的图片格式有jpg、png等，对于这些图片，在前端展示的时候，需要将其转换成base64格式的编码。

一、什么是base64格式

Base64是一种用64个字符来表示任意二进制数据的方法。64个字符包括A-Z、a-z、0-9和两个符号+、/，等号=用来作为后缀填充用。在Base64编码中，由于字符只有64种，因此编码后的文本比原文小1/3。

二、图片转换为base64的常用方式

方法一：Data URL scheme

1. 假设一张图像：A.jpg ，把它在网页上显示出来的标准方法是：

<img src="http://sjolzy.cn/images/A.jpg"/>

这种取得数据的方法称为 http URI scheme 。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

这种取得数据的方法称为 Data URI scheme 。

2. Data URI scheme 的语法

在上面的 Data URI scheme 中：

data 表示取得数据的协定名称；

image/png 是数据类型名称；

base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。

目前，Data URI scheme支持的类型有：

data: 文本数据
data: text/plain, ------- 文本数据
data: text/html, -------- HTML代码
data: text/html;base64, -------- base64编码的HTML代码
data: text/css, ---------- CSS代码
data: text/css;base64, ---------- base64编码的CSS代码
data: text/javascript, ------------ Javascript代码
data: text/javascript;base64, --------- base64编码的Javascript代码
data: image/gif;base64, ---------------- base64编码的gif图片数据
data: image/png;base64, -------------- base64编码的png图片数据
data: image/jpeg;base64, ------------- base64编码的jpeg图片数据
data: image/x-icon;base64, ---------- base64编码的icon图片数据

① 在 HTML 中使用 data URL （不建议这样使用）

<img src="data:image/png;base64,image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC"/>

② 在 CSS 中使用 data URL

body { 
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxA
      fBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC")
     };

③ 在 script 中使用 data URL

 _captchaImage() {
    captchaImage().then(res => {  //请求接口
        if (res.code == 200) {
                this.codeUrl = 'data:image/gif;base64,' + res.img; // 拼接请求回来的数据
                this.formModel.uuid = res.uuid;
           }
   });
},	

参考文档：blog.csdn.net/weixin_5033…

方法二：利用canvas

使用示例如下，项目中用到的下载图片方法

const downloadIamge = (imgsrc, name) => {
    const image = new Image()
    // 允许资源跨域使用
    image.setAttribute('crossOrigin', 'anonymous')
    image.src = imgsrc
    image.onload = () => {
      // 利用canvas将图片转换为base64编码
      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)
      // 将canvas对象转换为base64位编码
      let url;
      if(Name.substring(Name.lastIndexOf(".")+1) == "jpg"){
        url = canvas.toDataURL('image/jpeg')
      }
      if(Name.substring(Name.lastIndexOf(".")+1) == "png"){
        url = canvas.toDataURL('image/png')
      }

      // 点击触发下载
      const a = document.createElement('a')
      const event = new MouseEvent('click')
      a.download = name
      a.href = url
      a.dispatchEvent(event)
    }
  }

后边了解其他方法再补充