Qrcode生成二维码相关问题-白红宇

Qrcode生成二维码相关问题

阅读量：4156 次

发布时间：2019-05-25

本文共 4080 字，大约阅读时间需要 13 分钟。

使用Qrcode生成二维码，并提供下载二维码图按钮

JS代码：

<div id="qrcode" style="width:100px; height:100px;margin: 10px 38px;"></div>

<a id="downloadLink"></a>

<a class="btn btn-mini btn-success" onclick="downloadClick()">下载</a>

<script type="text/javascript" src="static/js/qrcode.js"></script>

<script type="text/javascript">

var url =#(activityErWeiMaURL);

//生成二维码

var qrcode = new QRCode(document.getElementById("qrcode"), {

text: url, //生成二维码的内容（链接或者其他）

width: 200, //生成的二维码的宽度

height: 200, //生成的二维码的高度

colorDark : "#000000", // 生成的二维码的深色部分

colorLight : "#ffffff", //生成二维码的浅色部分

correctLevel : QRCode.CorrectLevel.L,//纠错等级

background : "#ffffff",//背景颜色

foreground : "#000000",//前景颜色

src : '../img/pm.jpg' //二维码中间的图片

});

//下载二维码

function downloadClick () {

var name= "#(name)";

// 获取base64的图片节点

var img = document.getElementById('qrcode').getElementsByTagName('img')[0];

// 构建画布

var canvas = document.createElement('canvas');

canvas.width = img.width;

canvas.height = img.height;

canvas.getContext('2d').drawImage(img, 0, 0);

// 构造url

url = canvas.toDataURL('image/png');

// 构造a标签并模拟点击

var downloadLink = document.getElementById('downloadLink');

downloadLink.setAttribute('href', url);

downloadLink.setAttribute('download', name+'.png');

downloadLink.click();

}

</script>

将生成的二维码替换为图片格式，使得手机可以长按保存操作：

<div id="qrcode" style="width:250px; height:250px;margin: 0 auto;"></div>

<div id="qrcodeNone" style="display: none;"></div>

<script type="text/javascript" src="static/js/qrcode.js"></script>

<script type="text/javascript">

function qrcodeStart(packagesId){

$("img[alt='Scan me!']").remove(); //重复生成二维码时，删除前一张

$("#qrcode").html(""); //重复生成二维码时，删除前一张（手机端加上这个才能清除）

$("#qrcodeNone").html(""); //重复生成二维码时，清除前一张

var urlLink = $('#pagelink').val();

var codesmer= $('#codesmer').val();

var url = urlLink + "codepage/codepage?codesmer=" + codesmer+"&&packagesId="+packagesId; //根据需求拼接地址

var qrcode = new QRCode(document.getElementById("qrcodeNone"), {

text: url,

width: 200, //生成的二维码的宽度

height: 200, //生成的二维码的高度

colorDark : "#000000", // 生成的二维码的深色部分

colorLight : "#ffffff", //生成二维码的浅色部分

correctLevel : QRCode.CorrectLevel.L

});

//获取网页中的canvas对象

var mycanvas1=document.getElementsByTagName('canvas')[0];

mycanvas1.style.display = 'none';//隐藏生成的canvas

//将转换后的img标签插入到html中

var img=convertCanvasToImage(mycanvas1);

$('#qrcode').append(img);//imagQrDiv表示你要插入的容器id

};

//从 canvas 提取图片 image

function convertCanvasToImage(canvas) {

//新Image对象，可以理解为DOM

var image = new Image();

// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持

// 指定格式 PNG

image.src = canvas.toDataURL("image/png");

return image;

}

</script>

Java生成方法

String text = contextPath + "codepage/codepage?code=" + merchantInfo.getExtensionCode();

private String getQRImg(String text, MerchantInfo merchantInfo) {

String fileName = "";

try {

// 设置二维码参数

Map<EncodeHintType, Object> hints = new HashMap<EncodeHintType, Object>();

hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");

BitMatrix bitMatrix = new MultiFormatWriter().encode(text, BarcodeFormat.QR_CODE, 150, 150, hints);

// 返回二维码

BufferedImage bufferedImage = MatrixToImageWriter.toBufferedImage(bitMatrix);

ByteArrayOutputStream os = new ByteArrayOutputStream();

ImageIO.write(bufferedImage, "jpg", os);

InputStream is = new ByteArrayInputStream(os.toByteArray());

fileName = FileUpload.fileUp(is, Tools.getRandomString(7), ".jpg", os.size());

} catch (Exception e) {

e.printStackTrace();

}

return fileName;

}

其他：

参数说明

new QRCode(element, option)

名称	默认值	说明
element	-	显示二维码的元素或该元素的 ID
option		参数配置

option 参数说明

名称	默认值	说明
width	256	图像宽度
height	256	图像高度
typeNumber	4
colorDark	"#000000"	前景色
colorLight	"#ffffff"	背景色
correctLevel	QRCode.CorrectLevel.L	容错级别，可设置为： QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H