把图片url转化成base64

FileReader - Web API 接口参考 | MDN

readAsDataURL方法

        读取指定的BIob或File对象。读取操作完成的时候,readyState会变成已完成DONE,并触发loadend事件,同时result属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。

readAsDataURL(blob)
//参数blob即将被读取的Blob或File对象

使用案例:

let url = 'api/xinjiang/bca6588cf7f285c1e822a1f2267eeb3a.jpg@!348x243'
 function imgToBase64(imgUrl){
        var xhr = new XMLHttpRequest()
        xhr.open('get',imgUrl,true)
        xhr.responseType="blob"
        xhr.onload = function(){
          if(this.status == 200){
            //得到一个Blob对象
            let response = this.response 
            //FileReader对象用于读取文件,即把文件内容读入内存。它的参数是File对象或Blob对象。
            let oFileReader = new FileReader()
            oFileReader.onloadend = function(e){
              img.value = e.target.result
            }
            //readAsDataURL方法返回一个data URL,它的作用基本上是将文件数据进行Base64编码。你可以将返回值设为图像的src属性
            oFileReader.readAsDataURL(response);
          }
        }
        xhr.send()
      } 
      imgToBase64(url)

猜你喜欢

转载自blog.csdn.net/m0_73334325/article/details/129711344