js 图片转base64的方式(两种)


Posted in Javascript onApril 24, 2018

方式一:Blob和FileReader 对象

实现原理:

使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"]

使用FileReader 对象接收blob

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js 图片转base64方式</title>
</head>
<body>
  <p id="container1"></p>
  <script>
    getBase64("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")
    function getBase64(imgUrl) {
      window.URL = window.URL || window.webkitURL;
      var xhr = new XMLHttpRequest();
      xhr.open("get", imgUrl, true);
      // 至关重要
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          var blob = this.response;
          console.log("blob", blob)
          // 至关重要
          let oFileReader = new FileReader();
          oFileReader.onloadend = function (e) {
            let base64 = e.target.result;
            console.log("方式一》》》》》》》》》", base64)
          };
          oFileReader.readAsDataURL(blob);
          //====为了在页面显示图片,可以删除====
          var img = document.createElement("img");
          img.onload = function (e) {
            window.URL.revokeObjectURL(img.src); // 清除释放
          };
          let src = window.URL.createObjectURL(blob);
          img.src = src
          document.getElementById("container1").appendChild(img);
          //====为了在页面显示图片,可以删除====

        }
      }
      xhr.send();
    }
  </script>
</body>
</html>

方式二:canvas.toDataURL()方法

实现原理:

使用canvas.toDataURL()方法

需要解决图片跨域问题 image.crossOrigin = '';

使用了Jquery库的$.Deferred()方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js 图片转base64方式</title>
</head>
<body>
<p id="container2"></p>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    let imgSrc = "https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg";

    //width、height调用时传入具体像素值,控制大小 ,不传则默认图像大小
    function getBase64Image(img, width, height) {
      var canvas = document.createElement("canvas");
      canvas.width = width ? width : img.width;
      canvas.height = height ? height : img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      var dataURL = canvas.toDataURL();
      return dataURL;
    }
    function getCanvasBase64(img) {
      var image = new Image();
      //至关重要
      image.crossOrigin = '';
      image.src = img;
      //至关重要
      var deferred = $.Deferred();
      if (img) {
        image.onload = function () {
          deferred.resolve(getBase64Image(image));//将base64传给done上传处理
          document.getElementById("container2").appendChild(image);
        }
        return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
      }
    }
    getCanvasBase64(imgSrc)
      .then(function (base64) {
        console.log("方式二》》》》》》》》》",base64);
      }, function (err) {
        console.log(err);
      });
  </script>
</body>
</html>

demo展示

图片Base64

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 一个图片切换的插件
Oct 09 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
vue写一个组件
Apr 09 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
react配合antd组件实现的管理系统示例代码
Apr 24 #Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 #Javascript
vue webpack实用技巧总结
Apr 24 #Javascript
浅谈vue中.vue文件解析流程
Apr 24 #Javascript
vue-cli2.9.3 详细教程
Apr 23 #Javascript
vue.js数据绑定操作详解
Apr 23 #Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 #jQuery
You might like
小偷PHP+Html+缓存
2006/12/20 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
一个实用的php验证码类
2017/07/06 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python装饰器decorator介绍
2014/11/21 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
公司员工的自我评价范例
2013/11/01 职场文书
任课老师推荐信范文
2013/11/24 职场文书
感恩教育月活动总结
2014/07/07 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
《失物招领》教学反思
2016/02/20 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python