使用html2Canvas实现下载二维码海报（div包裹二维码图片及海报信息）功能

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' });
}