基于javascript处理二进制图片流过程详解


Posted in Javascript onJune 08, 2020

今天学习怎么生成二维码,我习惯所有请求都用ajax完成

但是今天发现jquery的ajax不支持二进制,只能搞纯文本

于是百度之后手动实现这一功能

function getBinary(url, args, success) {
  var xmlhttp = new XMLHttpRequest();
  var data = eval(args);
  var i = 0;
  for (var key in data) {
    if (i++ === 0) {
      url += '?' + key + "=" + data[key];
    } else {
      url += '&' + key + "=" + data[key];
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.responseType = "blob";
  xmlhttp.onload = function () {
    success(this.response);
  };
  xmlhttp.send();
}

我没有处理不同浏览器的XHR的问题 需要处理的在第一行搞就行

需要三个参数

地一个是请求url,第二个是请求参数,第三个是成功后的处理方法

请求参数用这样的方式

{‘param1':1,'param2':2,'param3':3}

处理方法要接收一个参数 就是响应的数据 也就是下图的data

然后是调用

function submit() {
  getBinary("/request/qrCode", {'data': $('#str').val()},
    function (data) {
      var img = $('#qrcode');
      window.URL.revokeObjectURL(img.src);
      $('#qrcode').attr('src', window.URL.createObjectURL(data));
    })
}

我这里是显示二维码

第五行的代码不能少 少了的话首次执行该方法没问题 再次执行的话图片不会改变 需要刷新页面

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

Javascript 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
vue实现分页的三种效果
Jun 23 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
react国际化react-intl的使用
May 06 Javascript
vue-router的hooks用法详解
Jun 08 #Javascript
Vue自定义render统一项目组弹框功能
Jun 07 #Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 #Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 #Javascript
vue路由权限校验功能的实现代码
Jun 07 #Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 #Javascript
JS原型对象操作实例分析
Jun 06 #Javascript
You might like
谈谈PHP的输入输出流
2007/02/14 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
php intval函数用法总结
2019/04/14 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
pybind11在Windows下的使用教程
2019/07/04 Python
python异常触发及自定义异常类解析
2019/08/06 Python
Django--权限Permissions的例子
2019/08/28 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
基于Python的OCR实现示例
2020/04/03 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
python计算auc的方法
2020/09/09 Python
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
医学生个人求职信范文
2014/02/07 职场文书
情人节活动总结范文
2015/02/05 职场文书
信息简报范文
2015/07/21 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers