基于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类
Sep 08 Javascript
jquery 注意事项与常用语法小结
Jun 07 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 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动态生成缩略图并输出显示的方法
2015/04/20 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
Document 对象的常用方法
2009/07/31 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
javascript动画浅析
2012/08/30 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
Javascript的表单验证长度
2016/03/16 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
python getopt详解及简单实例
2016/12/30 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Python 判断奇数偶数的方法
2018/12/20 Python
python读取xlsx的方法
2018/12/25 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
三个python爬虫项目实例代码
2019/12/28 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
python遍历路径破解表单的示例
2020/11/21 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
中青班党性分析材料
2014/02/16 职场文书
调解协议书
2014/04/16 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
中学生思想品德评语
2014/12/31 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
老人与海读书笔记
2015/06/26 职场文书
python如何在word中存储本地图片
2021/04/07 Python