js实现base64格式编码图片(通俗,易懂)

场景一:项目assets资源里面的图片本地图片

//项目本地assets资源得本地图片
function imgToBase64(url) {
  const image = new Image();//创建一个图像对象
  image.src = url;//在IE游览器src不能在onload事件得前面
  image.onlood = () => {
    //当image加载完毕后执行得事件
    const convas = document.createElement('canvas');
    canvas.width = image.naturalWidth;
    canvas.height = image.naturalHeight;
    //naturalHeight是元素的自然宽度,它永远不会改变。例如,即使使用 CSS 或 JavaScript 
    //调整图像大小,100px 宽的图像的自然宽度始终为 100px。
    canvas.style.width = `${convas.width / window.devicePixelRatio}px`;//window.devicePixelRatio是设备像素比
    canvas.style.height = `${convas.height / window.devicePixelRatio}px`;
    const ctx = canvas.getContext('2d')
    //Canvas 自身无法绘制任何内容。Canvas 的绘图是使用 JavaScript 操作的。Context 对象就是 JavaScript 操作 Canvas 的接口。
    //使用[CanvasElement].getContext('2d')来获取 2D 绘图上下文
    if(!ctx){
      return null;
    }
    ctx.drawImage(image,0,0);
    const base64 = canvas.toDataURL('image/png');
    //canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。
    //可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。
    return base64;
  }
}
//引入项目图片
const imgUrl = require('./images/error.png');
const res = imgToBase64(imgUrl);
console.log('生成base64的图片',res)


场景二:有一个公开的url,比如https//xx.png 或者项目public目录下的图片

  • 使用 ajax + FileReader
  • ajax 异步请求使用XMLHttpRequest、fetch、axios都可以
  • 需要将请求的返回格式 responseType 转成 Blob 格式
  • 这种方法也适用于文件转成 base64
 getBase64(imgUrl) {
     let xhr = new XMLHttpRequest();
     xhr.open('get', '/xxx.jpg', true);
     // 重点1
     xhr.responseType = 'blob';
     xhr.onload = function() {
         if (this.status == 200) {
              //得到一个blob对象
              let blob = this.response;
              // 重点2
              let oFileReader = new FileReader();
              oFileReader.onloadend = function(e) {
                  // 结果
                  const base64 = e.target.result
              };
              oFileReader.readAsDataURL(blob);
         }
     };
     xhr.send();
},

使用 fetch api请求,大同小异,重点都是 responseType 要设置为blob,再使用 FileReader 的 readAsDataURL 方法把 blob 转成 base64

function getBase64(imgUrl) {
   var xhr = new XMLHttpRequest();
   fetch(imgUrl, {
        responseType: 'blob'
   })
    .then(response => {
        return response.blob();
    })
    .then(blob => {
        let oFileReader = new FileReader();
        oFileReader.onloadend = function(e) {
            // base64结果
            const base64 = e.target.result
        };
        oFileReader.readAsDataURL(blob);
    });
},

你可能感兴趣的:(javascript,前端,开发语言)