前端img转base64

// 参数说明:图片地址(本地或者线上url)、处理后返回的base64内容、指定图片类型
function imgToBase64(url, outputFormat) {
  return new Promise((resolve, reject) => {
    let canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image;
    img.crossOrigin = 'Anonymous'; //解决Canvas.toDataURL 图片跨域问题
    img.onload = () => {
      let width = img.width;
      let height = img.height;

      // 压缩比例 -- 可以自己修改参数。500px宽度以下原尺寸,大于500px比例处理
      let bili = Math.round(width / 500) || 1;
      let rate = 1 / bili;
      canvas.width = width * rate;
      canvas.height = height * rate;
      ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
      let dataURL = canvas.toDataURL(outputFormat || 'image/jpeg');
      // 去除标头 -- 传递给后台时一般去除头部
      // let reg = new RegExp('^data:image/[^;]+;base64,');
      // dataURL = dataURL.replace(reg, '');
      canvas = null;
      resolve(dataURL);
    }
    img.src = url;
  })
};

// 调用:
imgToBase64("https://img0.bdstatic.com/static/searchdetail/img/logo-2X_2dd9a28.png").then(res => console.log(res))
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值