基于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 window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 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
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
Jquery uploadify图片上传插件无法上传的解决方法
2013/12/16 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
JS重载实现方法分析
2016/12/16 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
python 连接sqlite及简单操作
2017/06/30 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
深入解析神经网络从原理到实现
2019/07/26 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
String是最基本的数据类型吗?
2013/06/13 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
工程总经理工作职责
2013/12/09 职场文书
创业资金计划书
2014/02/06 职场文书
霸气队列口号
2014/06/18 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
施工员岗位职责
2015/02/10 职场文书
母亲节寄语大全
2015/02/27 职场文书
社区党建工作总结2015
2015/05/13 职场文书
2015年小学生暑假总结
2015/07/13 职场文书