生活不易、且行且珍惜。网站首页 程序人生
Qrcode生成二维码相关问题
发布时间：2019-03-06 16:57编辑：zj 阅读：
文章分类：
开发互动QQ群：170915747
使用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>
生成带二维码海报样式
<div class="body" >
<div id="qrcode" style="margin: 0 auto;"></div>
<div id="canbox">
<canvas style="display:none;" id="myCanvas" ></canvas>
</div>
<img class="canimg" src=""/>
<div id="qrcodeNone" style="width:250px; height:250px;margin: 0 auto;display: none;"></div>
</div>
function qrcodeStart(packageId,imgUrl,nameVal){
$("img[alt='Scan me!']").remove();
$("#qrcode").html("");
$("#qrcodeNone").html("");
document.getElementById("page-qrcode").style.display="block";
var urlLink = $('#pagelink').val();
var code = $('#code').val();
var url = urlLink + "codepage/codepage?code=" + code+"&&packageId="+packageId;
var qrcode = new QRCode(document.getElementById("qrcodeNone"), {
text: url,
width: 250, //生成的二维码的宽度
height: 250, //生成的二维码的高度
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 */
//画海报
var width =330 //宽度
var height = 410 // 高度
var c = document.getElementById("myCanvas");
c.width = width
c.height = height
var ctx = c.getContext("2d");
//首先画上背景图
var img = new Image();
img.crossOrigin="anonymous";
img.src = imgUrl;
var x_bot = height - 280 //画上名字
var y_bot = width - 265
ctx.font = "20px Georgia";
//画上二维码
function convertCanvasToImage(canvas) {
var image = new Image();
image.crossOrigin="anonymous";
image.src = canvas.toDataURL("image/png");
return image;
}
var mycans = $('canvas')[1];//二维码所在的canvas
var codeimg = convertCanvasToImage(mycans)
console.log(mycans.toDataURL("image/png"))
var xw = width - 265
var xh = height - 215
img.onload = function() { //必须等待图片加载完成
ctx.drawImage(img, 0, 0, width, height); //绘制图像进行拉伸
ctx.fillText('', y_bot, x_bot);//需要名称在‘’加nameVal
ctx.drawImage(codeimg, xw, xh, 200, 200);
//绘制完成,转为图片
setTimeout(function() { //在ios上无法在画完之后取到整个画布内容，加了个settimeout
var bigcan = $('canvas')[0];
let images = new Image();
images.crossOrigin="anonymous";
images.src = bigcan.toDataURL("image/png");
$('.canimg').attr('src', bigcan.toDataURL("image/png"))
}, 0)
}
};此方法需要注意背景图的跨域问题，上面的imgUrl用的是阿里云oss服务器的，本项目是在另一个服务器的，js里面会报这几个错
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. Failed to load resource: net::ERR_FAILED No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决方法是：
首先
var img=new Image; img= img.crossOrigin="anonymous"; img.src="图片地址";
注意顺序，然后还有就是去阿里云修改服务器配置
参考http://blog.sina.com.cn/s/blog_e4bd46a00102xn92.html
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 |
API 接口
| 名称 | 说明 |
|---|---|
| makeCode(text) | 设置二维码内容 |
| clear() | 清除二维码。（仅在不支持 Canvas 的浏览器下有效） |
#去评论一下
标签：#Qrcode
版权声明：本博客的所有原创内容皆为作品作者所有
转载请注明：来自ZJBLOG 链接：www.zjhuiwan.cn
+1
「万物皆有时，比如你我相遇」
感谢大佬打赏【请选择支付宝或微信，再选择金额】
使用微信扫描二维码完成支付
