我做的是在網站內容詳情頁下點擊微信分享,需要彈出二維碼,話不多說,直接看效果:
首先在前端頁面定義二維碼容器,用來存放后臺生成的二維碼(下面是對應上圖中的三個logo圖標,放在這里是為了讓大家看得更清楚!)
<ul> <li><img src="/static/Images/HitArea/logo-sina.png" alt="" onclick="shareToWeiBo()"></li> <li><img src="/static/Images/HitArea/logo-friendCircle.png" alt="" onclick="WeiXin()"></li> <li><img src="/static/Images/HitArea/logo-QQzone.png" alt="" onclick="qqZoneShare()"></li> </ul> `<!-- 存放二維碼的容器 --> <img id="qrcode" style="padding-left: 20px">`
給微信logo添加 onclick() 事件(我的代碼都放在對應js文件中,使用時需在html頁面引入,你們自己也可以直接放在頁面的
//js中方法,微信掃描二維碼
function WeiXin(){ //debugger; //清空二維碼文本框 $("#qrcode").html(""); var title = $("#commentTitle").val(); var url = window.location.href; var url2 = url.split("localhost:8068/"); if (url2.length > 1){ var url3 = url2[1]; var url4 = "http://www.zhengquan51.com/" + url3; } else{ //如果是在線上路徑下 url4 = url2; } var icno = $("#icno").val(); if (icno == undefined || icno == null){ icno = ""; }
//主要看這里就行了(作用是調用后臺接口以及圖片回顯)
$("#qrcode").attr("src", "/getCode/qrcode?content=" + url4); //根據路徑訪問后臺接口,生成二維碼并通過src屬性展示在容器中,url4為我需要生成二維碼的頁面鏈接內容 $(".Index-Popup-Boxs").show(); }
后臺代碼,首先在controller層寫qrcode方法,代碼如下:
/** * 生成微信圖片二維碼 * * @param request * @param response * @param content 為前端傳過來的二維碼的內容,即路徑鏈接 * @throws Exception */ @Log("微信圖片二維碼") @GetMApping("/qrcode") public void qrcode(HttpServletRequest request, HttpServletResponse response, @RequestParam(name = "content") String content) throws Exception { if (StringUtils.isBlank(content)) { response.sendRedirect("/404.html"); return; } //調用工具類,生成二維碼 RecodeUtil.creatRrCode(content, 180,180,response); //180為圖片高度和寬度 }
編寫工具類RecodeUtil,該類存放在我項目下的utils文件目錄下,你們可以自行選在位置,在controller里導入就行了,工具類代碼如下:
import com.google.zxing.BarcodeFormat; import com.google.zxing.EncodeHintType; import com.google.zxing.MultiFormatWriter; import com.google.zxing.WriterException; import com.google.zxing.common.BitMatrix; import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel; import JAVAx.imageio.ImageIO; import javax.servlet.http.HttpServletResponse; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.Hashtable; public class RecodeUtil { public static void creatRrCode(String contents, int width, int height,HttpServletResponse response) { Hashtable hints = new Hashtable(); hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.H); //容錯級別最高 hints.put(EncodeHintType.CHARACTER_SET, "utf-8"); //設置字符編碼 hints.put(EncodeHintType.MARGIN, 1); //二維碼空白區域,最小為0也有白邊,只是很小,最小是6像素左右 try { BitMatrix bitMatrix = new MultiFormatWriter().encode(contents, BarcodeFormat.QR_CODE, width, height, hints); // 1、讀取文件轉換為字節數組 // ByteArrayOutputStream out = new ByteArrayOutputStream(); BufferedImage image = toBufferedImage(bitMatrix); //轉換成png格式的IO流 ImageIO.write(image, "png", response.getOutputStream()); // byte[] bytes = out.toByteArray(); // // 2、將字節數組轉為二進制 // BASE64Encoder encoder = new BASE64Encoder(); // binary = encoder.encodeBuffer(bytes).trim(); } catch (WriterException e) { // TODO Auto-generated catch block e.printStackTrace(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } /** * image流數據處理 * * @author ianly */ public static BufferedImage toBufferedImage(BitMatrix matrix) { int width = matrix.getWidth(); int height = matrix.getHeight(); BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); for (int x = 0; x < width; x++) { for (int y = 0; y < height; y++) { image.setRGB(x, y, matrix.get(x, y) ? 0xFF000000 : 0xFFFFFFFF); } } return image; } }
另外,因為jar用的是google的,所以要在pom.xml里導入相關依賴,這里我也幫你們準備好了! 在標簽里粘貼下面兩個即可:
<dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId> <version>2.2</version> </dependency> <dependency> <groupId>com.google.zxing</groupId> <artifactId>javase</artifactId> <version>2.2</version> </dependency>
原文:https://blog.csdn.net/weixin_43601099/article/details/91493485