获取压缩后的base64图片地址

在人间挣达不溜的日子

于 2022-08-05 11:52:29 发布

阅读量314

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 html5

本文链接：https://blog.youkuaiyun.com/m0_69068051/article/details/126174920

这段代码展示了如何将文件转换为Base64编码，并在转换过程中进行尺寸压缩。通过FileReader读取文件，将其转化为Data URL，然后利用Image和Canvas进行图片尺寸调整和绘制，最后将canvas内容转为Base64格式的URL。回调函数用于接收处理后的URL。

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

参数1:文件，参数2:回调方法拿到url

export function getImgBase64(file, callback) {
  var url = "";
  //创建文件阅读器
  var reader = new FileReader();
  //创建图片
  var img = new Image();
  //读取为数据url
  reader.readAsDataURL(file);
  //文件阅读器加载事件
  reader.onload = (e) => {
    img.src = e.target.result;
    //图片加载事件
    img.onload = () => {
      var canvas = document.createElement("canvas");
      var context = canvas.getContext("2d");
      canvas.width = 200;
      canvas.height = 100;
      // 核心JS就这个图片绘制成canvas
      context.drawImage(img, 0, 0, canvas.width, canvas.height);
      // canvas绘制的图片转换成base64格式信息
      url = canvas.toDataURL();
      callback(url)
    };
  };
}

引入使用，调用如下

getImgBase64(file.file, (url) => { // console.log(url);在回调里做操作 // });