基于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 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
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中cookie的作用域
2008/03/27 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
python操作 hbase 数据的方法
2016/12/18 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
python实现根据文件格式分类
2019/10/31 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
自动化专业个人求职信范文
2013/11/29 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
管理专员自荐信
2014/01/26 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
老乡聚会通知
2015/04/23 职场文书
高三生物教学反思
2016/02/22 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers