领导忽然要我们制作一个动态生成的二维码, 并将二维码保存下来供用户分享,所以研究了一下实现的方法
一. 需要使用的插件
主要运用到下面三个插件, 网上都可以搜索下载到
- jquery.qrcode.min.js : 二维码生成插件
- html2canvas.js : 将页面元素转化为canvas插件
- canvas2image.js : 将canvas转化为图片插件
二. 效果图
- 在输入框输入需要生成二维码的链接,
- 然后点生成二维码,就可以看到新生成的二维码
- 再点击生成图片, 就可以将页面直接转化为图片 并下载
三. 具体代码
- 测试过的代码, 可直接复制使用
<body >
<div class="bg">
<div class="text">输入网址,点击按钮生成二维码</div>
<input type="text" class="inp" value="http:www.baidu.com?id=1">
<button type="button" class="erweima">生成二维码</button>
<div id="qrcode"></div>
<div class="text">点击生成图片,将图片分享给别人可以领奖利</div>
<button type="button" class="picture">生成图片</button>
</div>
<div class="need .clearfix" ></div>
</body>
<script src="./api/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="./api/jquery.qrcode.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript" charset="utf-8" async defer></script>
<script src="./api/canvas2image.js" type="text/javascript" charset="utf-8" async defer></script>
<script>
var inp=$(".inp").val();
var info=$(".title");
var save = $(".save");
let w = $(window).width(); //图片宽度
let h = $(window).height(); //图片高度
console.log(w+" "+h);
console.log("操作系统"+getOS());
//选择需要生成图片的标签, 将jQuery对象转换为dom对象,
var need = $("body").get(0);
// 生成二维码
$('.erweima').click(function() {
jQuery('#qrcode').qrcode("http://www.baidu.com");
})
// 点击转成canvas，最后用于生成图片
$('.picture').click(function(e) {
// 调用html2canvas插件
html2canvas(need).then(function(canvas) {
// canvas宽度
var canvasWidth = canvas.width;
// canvas高度
var canvasHeight = canvas.height;
// 控制台查看绘制区域的宽高
console.log('canvas:'+ canvasWidth+" "+canvasHeight);
// 渲染canvas，这个时候将我们用于生成图片的区域显示出来
$(".need").show();
// 将canvas转为图片
var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
// 渲染图片，并且加到页面中查看效果
$(".need").html(img);
// 保存
// console.log(img.src)
downloadFile('测试.png', img.src);
});
});
// 下载图片
function downloadFile(fileName, content) {
let aLink = document.createElement('a');
let blob = base64ToBlob(content); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
// aLink.dispatchEvent(evt);
aLink.click()
}
//base64转blob
function base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
</script>
<style type="text/css" media="screen">
body {
margin: 0;
padding: 20px;
}
.bg{
width: 100%;
min-height: 100%;
height: 100vh;
background: url('./image/timg.jpg');
text-align: center;
padding-top: 15px;
text-align: center;
}
.text{
color: #fff;
width: 80%;
margin: 15px;
font-weight: 700;
padding: 0 15px;
line-height: 50px;
border: 1px solid #b7c092;
border-radius: 10px;
outline: none;
}
.inp {
width: 80%;
display: block;
margin-left: 30px;
margin-bottom: 15px;
line-height: 40px;
border: 1px solid pink;
font-size: 20px;
border-radius: 10px;
}
.save, .picture, .erweima{
border-radius: 10px;
border: none;
margin-bottom: 15px;
width: 150px;
padding: 15px;
color: #fff;
font-size: 22px;
font-weight: 700;
background: skyblue;
outline: none;
}
.title{
/* margin-top: 100px; */
}
.need{
width: 100%;
/* background: url(20.jpg) no-repeat; */
position: fixed;
left: 0;
top: 0;
display: none;
}
.need img {
width: 90%;
display: block;
position: absolute;
left: 5%;
top: 20px;
/*transform: translate(-50%, -50%);*/
border: 1px solid #000;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
</style>
- 觉得有用就点个赞吧! O(∩_∩)O哈哈~