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

后端代码:

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>

 

 写入页面后的展示:

 

 

 

猜你喜欢

转载自www.cnblogs.com/yuchuan/p/ajax_qrcode.html
0条评论
添加一条新回复