基于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 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
js使用递归解析xml
Dec 12 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
关于vue-router的那些事儿
May 23 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
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
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
谈一谈JS消息机制和事件机制的理解
2016/04/14 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
C,C++的几个面试题小集
2013/07/13 面试题
什么时候用assert
2015/05/08 面试题
车辆工程专业求职信
2014/06/14 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
医者仁心观后感
2015/06/17 职场文书