基于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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
Node.js实现文件上传
Jul 05 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
selenium+python实现自动登录脚本
2018/04/22 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
公司欠款证明
2015/06/24 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers