Ajax请求二进制流并在页面展示

时间:2021-02-11 10:12:10

后端代码:

public void getIntegralQrcode(HttpServletResponse response, String token) throws BizException, IOException, WriterException {
logger.info("qrcode info ..."); response.setCharacterEncoding("UTF-8");
response.reset();
ServletOutputStream os = response.getOutputStream(); // 请求地址
String url = ConfigProperties.getUrl();
logger.info("qrcode info request url -- > {}", url); // 加密内容
String base64Code = Base64Utils.getBase64Code(WechatQrcodeTypeEnum.H5.getValue(), maculaConfig.getIntegralQrcodeScanName(), null);
logger.info("qrcode info base64Code -- > {}", base64Code); // 二维码内容
String content = WechatQrcodeUtil.getRequestUrl(url, "2", base64Code);
logger.info("qrcode info -- > {}", content); QRCodUtil.encodeQRCodeImage(content, null, WechatQrcodeUtil.IMAGE_WIDTH, WechatQrcodeUtil.IMAGE_HEIGHT, os);
os.flush();
os.close();
}

后端工具类:

public class WechatQrcodeUtil {

    static Logger logger = LoggerFactory.getLogger(WechatQrcodeUtil.class);

    private static final String TYPE = "type";
private static final String NAME = "name";
private static final String PARAM = "param";

// 加密内容定义区域key
private static final String base64= "base64"; private static final String EQUAL_STR = "=";
private static final String AND_STR = "&";
private static final String QUE_STR = "?"; public static final int IMAGE_WIDTH = 262;
public static final int IMAGE_HEIGHT = 262; /**
* 放入二维码内容
*
* @param url 请求地址
* @param modelType 请求模块名称
* @param base64 加密内容
* @return
*/
public static String getRequestUrl(String url, String modelType, String base64){
StringBuffer sb = new StringBuffer();
sb.append(url);
sb.append(QUE_STR);
sb.append(TYPE).append(EQUAL_STR).append(modelType);
sb.append(AND_STR);
sb.append(base64).append(EQUAL_STR).append(base64);
logger.info("request address: {}", sb.toString());
return sb.toString();
} /**
* 获取加密参数内容
* @param type 类型 @see{WechatQrcodeTypeEnum}
* @param name
* <li>channelName:</li>
* <li>moduleName:</li>
* <li>httpurl:在线页面地址</li>
* @param urlParams key:value,key:value,...
*
* @return
* @throws UnsupportedEncodingException
*/
public static String getBase64Code(String type, String name, Object... urlParams) throws UnsupportedEncodingException{
StringBuffer sb = new StringBuffer();
sb.append(TYPE).append(EQUAL_STR).append(type);
sb.append(AND_STR);
sb.append(NAME).append(EQUAL_STR).append(name);
if(urlParams != null){
sb.append(AND_STR);
sb.append(PARAM).append(EQUAL_STR).append(urlParams);
}
logger.info("request params: {}", sb.toString());
return Base64.encode(sb.toString().getBytes());
} }

前端Ajax请求:

<#--
* README
* 在页面定义页面token<i><@macula.formToken /></i>
*
* @author add by liuyc in 2018-11-28
*
--> <div id="qrcode-image" class="bottom-image"></div> <script type="text/javascript"> window.onload = function(){ var xhr = new XMLHttpRequest(); var url = base + "/qrcode?token=" + $("input[name='ftoken']").val();
xhr.open('GET', url, true); xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
var blob = this.response;
var img = document.createElement("img");
img.onload = function (e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.getElementById("qrcode-image").appendChild(img);
}
}
xhr.send();
} </script>

写入页面后的展示:

Ajax请求二进制流并在页面展示

Ajax请求二进制流并在页面展示的更多相关文章

  1. ajax 请求二进制流 图片

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

  2. ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践

    写在前面 :从提出需求到完美的解决问题,实现过程是曲折的. 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返 ...

  3. 第六章 MVC之 FileResult和JS请求二进制流文件

    一.FileResult 1.简介 表示一个用于将二进制文件内容发送到响应的基类.它有三个子类: FileContentResultFilePathResultFileStreamResult 推荐阅 ...

  4. ajax请求二进制流图片并渲染到html中img标签

    日常显示图片都诸如这种形式:直接使用img的src属性 <img src="图片路径.地址" alt="" /> 以上方法无法在获取图片请求中设置请 ...

  5. JavaScript读二进制文件并用ajax传输二进制流

    综合网上多个教程,加上自己实践得出的方法,目前能够兼容谷歌.IE11.IE10. htmlbody里的内容,没什么特殊的. <div id="dConfirm"> &l ...

  6. 通过配置http拦截器,来进行ajax请求验证用户登录的页面跳转

    在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...

  7. ajax请求后弹开新页面被浏览器拦截

    window.open()我想应该很多人都不陌生吧,它可以实现除用a标签以外来实现打开新窗口! 最近开发项目用到时,却遇到了麻烦,本来好好的弹出窗口,结果被浏览器无情的给拦截了! 代码如下: $.ge ...

  8. SpringMVC响应Ajax请求(&commat;Responsebody注解返回页面)

    项目需求描述:page1中的ajax请求Controller,Controller负责将service返回的数据填充到page2中,并将page2整个页面返回到page1中ajax的回调函数. 一句话 ...

  9. session过期,拦截ajax请求并跳转登录页面

    1.方法一 :1.1使用filter 和ajaxsetup 对ajax进行拦截并跳转登录页面 public void doFilter(ServletRequest request, ServletR ...

随机推荐

  1. 《机器学习实战》学习笔记——第13章 PCA

    1. 降维技术 1.1 降维的必要性 1. 多重共线性--预测变量之间相互关联.多重共线性会导致解空间的不稳定,从而可能导致结果的不连贯.2. 高维空间本身具有稀疏性.一维正态分布有68%的值落于正负 ...

  2. Usage of readonly and const

    Many new learners can not make sure the usage scenarios of readonly and const keywords. In my opinio ...

  3. Linux下SVN的简单配置

    1.安装svn sudo yum install subversion 2.查看是否安装成功 svnserve --version 3.创建svn目录 svnadmin create 目录名 例如:s ...

  4. 敏捷开发之产品日日新,一步通之---自动化代码构建-&gt&semi;自动化打包-&gt&semi;自动化安装部署

    本文将介绍如何自动化实现代码构建,自动化代码打包成exe安装包,自动化安装到测试环境.通过计划任务的方式,每天自动化发布最新的产品供老板展示,供测试人员使用,真正实现敏捷的快速迭代. 自动代码构建 自 ...

  5. MacOS下Rails&plus;Nginx&plus;SSL环境的搭建&lpar;中&rpar;

    三.配置Nginx 先是修改 hosts 文件,意思是创建一个本地域名以便我们访问,比如: $ sudo subl /etc/hosts 127.0.0.1 rails_project.local 但 ...

  6. DSAPI Wifi热点的扫描与连接

    使用DSAPI扫描和连接Wifi热点,支持连接隐藏的SSID. 效果演示: 代码如下: Private Wifi As New DSAPI.网络.Wifi Private Sub Button1_Cl ...

  7. Python学习之路基础篇--05Python基础&plus;列表和元组

    1 list # 增 city = ["wuhan", "shanghai", "chongqing", "changsha&qu ...

  8. WPF ListView 使用GridView 带有Header 以及点击header排序 sort

    ListView: <ListView x:Name="lvFiles" VerticalAlignment="Stretch" Background=& ...

  9. gitlab 灾备

    Gitlab创建备份 使用Gitlab一键安装包安装Gitlab非常简单,同样的备份恢复与迁移也非常简单.使用一条命令即可创建完整的Gitlab备份: gitlab-rake    gitlab:ba ...

  10. angular之自定义 directive

    1,指令的创建至少需要一个带有@Directive装饰器修饰的控制器类.@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字. 2,创建一个highlight.direc ...