Edge瀏覽器圖形驗證碼無法正常顯示

在這裏插入圖片描述
其他瀏覽器顯示正常。

			//生成驗證碼文本
            String capText = captchaProducer.createText();
            logger.info("[{}]生成驗證碼文本===={}",mobile,capText);
            //利用生成的字符串構建圖片
            BufferedImage bi = captchaProducer.createImage(capText);
            ServletOutputStream out = response.getOutputStream();
            ImageIO.write(bi, "jpg", out);
            try {
                out.flush();
            } finally {
                out.close();
            }

io流的形式將圖片傳到前端用img接收,在Edge瀏覽器顯示

<img src="/resource/images/pic_login_code.jpg" onclick="getCaptcha();" width="80" height="32"> 

修改處理方案:

			//生成驗證碼文本
            String capText = captchaProducer.createText();
            logger.info("[{}]生成驗證碼文本===={}",mobile,capText);
            //利用生成的字符串構建圖片
            BufferedImage bi = captchaProducer.createImage(capText);
            ByteArrayOutputStream out = new ByteArrayOutputStream();
            ImageIO.write(bi, "png", out);
            String result = Constants.IMG_BASE64_PREFIX + Base64.getEncoder().encodeToString(out.toByteArray());

後端將圖片流用Base64加密生成字符串,在前端用img src接收,然後問題解決

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMmFhYWUwOS01N2VmLWE2NDItYWFjZS05ZjcyYjU0OTYyN2MiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUIxOTMxRUFCMjgxMTFFOEE4MjA5RTAwMDI1MUQ0MzMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUIxOTMxRTlCMjgxMTFFOEE4MjA5RTAwMDI1MUQ0MzMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjUzMzI3ZDE2LTI3ZTQtNmE0Ny1iM2FmLTVkYzRiNzhhMDQ0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDplMmFhYWUwOS01N2VmLWE2NDItYWFjZS05ZjcyYjU0OTYyN2MiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7KYJRXAAAAhUlEQVR42mL8////YQYGBjYg9gDi9wzEAUEg3gHEv5iABCsQmwHxbqgEMZp3Q/WwMQBdIAjEZ/9DwBkonwEHFoSqgavFKUGMZpA4QQWE5IixBa/riPEnXq8RE1h4A5eJgVJAbS9QFIgURSNFCYnipHyCSM3YDDnBCM3O7EDsTkZ2/g0QYAB1zYynyEvFfQAAAABJRU5ErkJggg==
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章