当前位置: 首页 > article >正文

前端图片转成base64

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


    getBase64 (imgUrl, callback) {

        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
                    // console.log(base64);
                    callback(base64)
                };
                oFileReader.readAsDataURL(blob);
            });
    }

2、使用new XMLHttpRequest();

 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();
},

http://www.kler.cn/a/134806.html

相关文章:

  • 蓝桥杯c++算法学习【2】之搜索与查找(九宫格、穿越雷区、迷宫与陷阱、扫地机器人:::非常典型的必刷例题!!!)
  • WEB攻防-通用漏洞SQL注入sqlmapOracleMongodbDB2等
  • Qt_day4_Qt_UI设计
  • 结构体是否包含特定类型的成员变量
  • 学术论文写作丨机器学习与深度学习
  • Electron 项目启动外部可执行文件的几种方式
  • 8年资深测试,自动化测试常见问题总结,惊险避坑...
  • Docker基础知识总结
  • 医院陪诊服务预约小程序的作用如何
  • 源启容器平台KubeGien 打造云原生转型的破浪之舰
  • [uni-app]记录APP端跳转页面自动滚动到底部的bug
  • hiredis/examples /example-libevent.c
  • 如何进行手动脱壳
  • Hive客户端hive与beeline的区别
  • VR智慧景区:VR赋能文旅产业,激活消费潜能
  • EtherCAT 伺服控制功能块实现
  • 3D建模基础教程:编辑多边形功能命令快捷方式
  • SpringBoot 整合 Freemarker
  • 小程序判断是否授权位置信息和手动授权
  • 【每日一题】最大子数组和
  • 小程序商城免费搭建之java商城 电子商务Spring Cloud+Spring Boot+二次开发+mybatis+MQ+VR全景+b2b2c
  • 越南MIC新规针对ICT和ITE产品电气授权标准变更
  • 一起学docker系列之四docker的常用命令--系统操作docker命令及镜像命令
  • Springcloud可视化物联网智慧工地云SaaS平台源码 支持二开和私有化部署
  • 沸点 | Ultipa 图数据库金融应用场景优秀案例首批入选,金融街论坛年会发布
  • Chat GPT 用于论文润色,常用指令这里都全了