基于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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 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
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
jQuery 联动日历实现代码
2012/05/31 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python导入时小括号大作用
2017/01/10 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
详解Python中的Lock和Rlock
2021/01/26 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
文员个人的求职信范文
2013/09/26 职场文书
五一手机促销方案
2014/03/08 职场文书
国旗下演讲稿
2014/05/08 职场文书
党支部三会一课计划
2014/09/24 职场文书
小学生读书笔记范文
2015/06/30 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android