html2Canvas官网地址
html2canvas - Screenshots with JavaScripthttps://html2canvas.hertzen.com/
1. 引入html2canvas库
方法一:npm获取
npm install html2canvas
import html2canvas from 'html2canvas';
方法二:直接下载html2canvas.min.js文件放入项目中并引入文件
<script src="dist/html2canvas.min.js"></script>
方法三:从第三方 CDN 提供商加载它
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.min.js"></script>
2、添加下载二维码海报事件
图片配置项说明:
scale:用于渲染的比例(也就是图片比例大小),默认为浏览器设备像素比。
useCORS:是否尝试使用 CORS 从服务器加载图像。
backgroundColor:设置海报/图片背景颜色,如果海报/图片是圆角则需要设置背景色为透明,不然四个角会有马赛克的颜色。
// download(要下载的海报dom, 海报/图片配置项) 函数详情写在下一步骤
// 点击下载海报按钮dom
document.querySelector('#download-qr-code-btn')
.addEventListener('click', download(document.querySelector('#qr-code'), {
scale: 2.605,
useCORS: true,
backgroundColor: 'transparent',
}));
3. 使用html2canvas将需要生成的海报并下载
// ele:要下载的海报dom
// options:图片配置项
function download(ele, options) {
html2canvas(ele, options).then((canvas) => {
// base64格式的图片 url
let dataURL = canvas.toDataURL('image/png');
// 转化成blob格式的图片 Blob{size:xx,type:xx}
// dataURLtoBlob(图片地址) 函数详情写在下一步骤
const blobUrl = dataURLtoBlob(dataURL);
// URL.createObjectURL()创建一个指向File或Blob对象的URL。这个URL可以被用于指定一个HTML标签的href属性
var fileUrl = URL.createObjectURL(blobUrl);
// 创建临时的a标签下载图片
var addElement = document.createElement('a');
addElement.href = fileUrl;
// 设置下载的图片名称
addElement.download = '图片名称.png';
// 将创建的a标签添加到页面上,并执行点击事件下载图片,再移除掉创建的a标签
document.body.appendChild(addElement);
addElement.click();
document.body.removeChild(addElement);
});
}
4. 图片地址格式转换
function dataURLtoBlob(dataurl) {
//分割为数组,分割到第一个逗号
var arr = dataurl.split(',');
let bstr = window.atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: 'png' });
}
完整代码
html代码
<div id="qr-code" style="border-radius: 12px; width: 288px; height: 372px; background:url('img/share_bg.png') no-repeat; background-size: 100% 100%;">
<div> 海报标题名称 </div>
<img style="width: 200px; height: 200px; filter: drop-shadow(0px 4px 12px #99E0FF);" src="img/qrcode.png">
<div>二维码提示信息</div>
</div>
<div id="download-qr-code-btn">点击下载海报</div>
js代码
// download(要下载的海报dom, 海报/图片配置项) 函数详情写在下一步骤
// 点击下载海报按钮dom
document.querySelector('#download-qr-code-btn')
.addEventListener('click', download(document.querySelector('#qr-code'), {
scale: 2.605,
useCORS: true,
backgroundColor: 'transparent',
}));
/*
图片配置项:
scale:用于渲染的比例(也就是图片比例大小),默认为浏览器设备像素比。
useCORS:是否尝试使用 CORS 从服务器加载图像。
backgroundColor:设置海报/图片背景颜色,如果海报/图片是圆角则需要设置背景色为透明,不然四个角会有马赛克的颜色
*/
// ele:要下载的海报dom
// options:图片配置项
function download(ele, options) {
html2canvas(ele, options).then((canvas) => {
// base64格式的图片 url
let dataURL = canvas.toDataURL('image/png');
// 转化成blob格式的图片 Blob{size:xx,type:xx}
// dataURLtoBlob(图片地址) 函数详情写在下一步骤
const blobUrl = dataURLtoBlob(dataURL);
// URL.createObjectURL()创建一个指向File或Blob对象的URL。这个URL可以被用于指定一个HTML标签的href属性
var fileUrl = URL.createObjectURL(blobUrl);
// 创建临时的a标签下载图片
var addElement = document.createElement('a');
addElement.href = fileUrl;
// 设置下载的图片名称
addElement.download = '图片名称.png';
// 将创建的a标签添加到页面上,并执行点击事件下载图片,再移除掉创建的a标签
document.body.appendChild(addElement);
addElement.click();
document.body.removeChild(addElement);
});
}
function dataURLtoBlob(dataurl) {
//分割为数组,分割到第一个逗号
var arr = dataurl.split(',');
let bstr = window.atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: 'png' });
}