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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
比较常见的javascript中定义函数的区别
Nov 09 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
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
PHP5 字符串处理函数大全
2010/03/23 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
php-msf源码详解
2017/12/25 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
jQuery源码分析之Event事件分析
2010/06/07 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
python使用turtle绘制分形树
2018/06/22 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
公司承诺书格式
2014/05/21 职场文书
个人事迹材料范文
2014/12/29 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电