基于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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
jQuery find和children方法使用
Jan 31 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
Python版实现微信公众号扫码登陆
May 28 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 数字左侧自动补0
2008/03/31 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
PHP中的类型约束介绍
2015/05/11 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
判断网页编码的方法python版
2016/08/12 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Python编写打字训练小程序
2019/09/26 Python
python numpy存取文件的方式
2020/04/01 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
正风肃纪剖析材料
2014/02/18 职场文书
保护环境的建议书
2014/03/12 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
违纪开除通知书
2015/04/25 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
详解MySQL的内连接和外连接
2023/05/08 MySQL