基于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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
详解Javascript 装载和执行
Nov 17 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
安装PyInstaller失败问题解决
2019/12/14 Python
python实现指定ip端口扫描方式
2019/12/17 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
外贸采购员求职的自我评价
2013/11/26 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
2014村务公开实施方案
2014/02/25 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
客房领班岗位职责
2015/02/11 职场文书
项目安全员岗位职责
2015/02/15 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python