html2canvas截取div内容并打成图片下载到本地（vue）

1.首先引入js（这个js可以解决保存的图片模糊问题）

js下载地址：https://github.com/eKoopmans/html2canvas/tree/develop/dist

import html2canvas from '~/assets/js/html2canvas.min.js'; // 引入截图js

2.

downLoadTcPhoto() { //点击下载图片按钮

            this.$nextTick(()=>{ 

            window.pageYoffset = 0;
            document.documentElement.scrollTop = 0; //跳到顶部解决截图不全的问题
            document.body.scrollTop = 0;

            html2canvas(document.querySelector('.tc_photo'), {
                // 以下字段可选
                //width: 798, // canvas宽度
                //height: this.$refs.tcPhoto.offsetHeight, // canvas高度
                // x: 0, // x坐标
                // y: 0, // y坐标
                // width:window.screen.availWidth,
                // height:window.getComputedStyle(this.$refs.tcPhoto).height,
                // windowWidth:document.body.scrollWidth,
              
                // x:0,
                // y:window.pageYOffset,
                foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
                useCORS: true, // 是否尝试使用CORS从服务器加载图像
                async: false, // 是否异步解析和呈现元素
                // 以下字段必填
                background: '#ffffff', // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
                dpi: 300, // 处理模糊问题
                onrendered: function (canvas) {
                    // https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
                    // let url = canvas.toDataURL('image/png', 1.0)
                    let url = canvas.toDataURL();

                    let a = document.createElement('a');
                    let event = new MouseEvent('click');
                    a.download = 'test';
                    a.href = url; //下载图片到浏览器
                    a.dispatchEvent(event);
                   
                },
            });
      
             })
           
        },