基于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模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
JS制作简单的三级联动
Mar 18 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 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 操作文件的一些FAQ总结
2009/02/12 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
php HTML无刷新提交表单
2016/04/05 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
使用pandas读取文件的实现
2019/07/31 Python
详解Python self 参数
2019/08/30 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
python之随机数函数的实现示例
2020/12/30 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
竞选学生会主席演讲稿
2014/04/24 职场文书
庆祝国庆节标语
2014/10/09 职场文书
政风行风整改方案
2014/10/25 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏