生成海报
最近接到一个需求，需要将页面链接生成二维码，当用户点击分享海报时自动生成一张图片，并且下载到本地。
页面主页功能在三个地方
- 当前链接生成二维码
- 页面转图片
- 下载图片
当前链接生成二维码
当前有很多封装好的js库可以将文本生成二维码，我使用到的是jquery.qrcode.js。有兴趣的百度一下。主体代码
<div id="qrcode"></div>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/jquery.qrcode.js"></script>
<script>
$("#qrcode").qrcode({
render: "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
text: "hello world", //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
width: "80", // //二维码的宽度
height: "80", //二维码的高度
background: "#ffffff", //二维码的后景色
foreground: "#000000", //二维码的前景色
src: "static/images/login/login.png" //二维码中间的图片
});
</script>
页面转成图片(JS截屏)以及下载
emememem....第一步直接想到了canvas，不过要是用原生方法直接画完整个页面，非常耗时耗力。非常推荐一个好用的canvas工具库html2cavas。其主要功能在于将页面转为canvas，减少了画canvas的复杂度，直接用html布局好转成canvas就好，亲民易用。
展示主体代码
npm install --save html2canvas或者yarn add html2canvas。
HTML部分
<body>
<div>内容部分</div>
<a id="downLoadBtn">下载海报</a>
</body>
import html2canvas from "html2canvas";
let oA = document.querySelector("#downLoadBtn");
// 将`body`节点截取变为canvas
html2canvas(document.querySelector("body"), {
height: '生成canvas的高',
// 不设置宽高为默认宽高，即当前节点的宽高
width: '生成canvas的宽',
}).then(canvas = >{
// canvas参数为生成的canvas的dom节点，可以对其进行dom操作
// 下载功能
// 设置a标签的download属性，点击a标签变为下载
oA.download = '文件名', // 设置下载的文件名
let url = canvas.toDataURL("image/png"); // canvas转png（base64）
oA.href = url; // a标签的url对应图片base64
});
document.querySelector("#downLoadBtn").click(); // 点击a标签，下载
如果用script引入，可以到html2cavas官网下载js文件，需要注意的是，使用方法需要修改为：
html2canvas(document.querySelector("body"), {
height: '生成canvas的高',
// 不设置宽高为默认宽高，即当前节点的宽高
width: '生成canvas的宽',
onrendered: function(canvas) {
// 返回canvas节点
}
});
网友评论