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>

写入页面后的展示：