html2canvas

html2canvas

在pc项目中画海报，可以借助html2canvas，在项目的index文件中可以引入

<script src="https://image.beautysaas.com/ERP/common/html2canvas.min.js"></script>

https://github.com/niklasvh/html2canvas/releases

//下载海报
    downloadAdvertising(){
      // #capture 就是我们要获取截图对应的 DOM 元素选择器
      html2canvas(document.querySelector('#wxShareBox'), {
        useCORS: true, // 【重要】开启跨域配置
        scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
        allowTaint: true, // 允许跨域图片
      }).then((canvas) => {
        const imgData = canvas.toDataURL('image/jpeg', 1.0);
        downloadImg(imgData,"base64");  
      });
    }

function downloadImg(src,type="url") {
    var image = new Image();
    if(type==="url"){
        image.src = src + '?v=' + Math.random(); // 处理缓存
    }else{
        image.src = src;
    }
    image.crossOrigin = '*';  // 支持跨域图片
    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, image.width, image.height);
        var dataURL = canvas.toDataURL('image/png');  // 可选其他值 image/jpeg
        var a = document.createElement('a');
        var event = new MouseEvent('click');
        a.download = '推广二维码';
        a.href = dataURL;
        a.dispatchEvent(event);
    };
}