获取压缩后的base64图片地址

这段代码展示了如何将文件转换为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);在回调里做操作 // });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值