第一种方法请查看来源网址

第二种方法：(亲测有效，方便)

作者在 html2canvas 的源码中添加了两个参数，分别为 scale 和 dpi，scale 是比例，辣么 dpi 是个什么玩意儿，以下是百度百科对 dpi 的定义：

DPI 是指每英寸的像素，也就是扫描精度。DPI 越低，扫描的清晰度越低，由于受网络传输速度的影响，web 上使用的图片都是 72dpi，但是冲洗照片不能使用这个参数，必须是 300dpi 或者更高 350dpi。例如要冲洗 46 英寸的照片，扫描精度必须是 300dpi，那么文件尺寸应该是(4300)(6300)=1200 像素*1800 像素。

只要增大 dpi 或者 scale 肯定能使同样宽高的图像变得清晰，那么模糊的问题也就不存在了。

使用：

import "@/assets/js/html2canvas.js"; // 引入刚刚自己下载的js文件
// 调用的方法
html2canvas(document.querySelector(".report"), {
    // 以下字段可选
    width: 490, // canvas宽度
    height: 240, // canvas高度
    x: 0, // x坐标
    y: 0, // y坐标
    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();
        console.log(url);
    },
});

特别提示 html2canvas 生成图片的坑：
1，有一些 css 样式没有办法直接识别，比如新增的 css，渐变，或者是 border-radius: 50%; 是没有效果的，必须要写成固定的数值才可以，正确写法：border-radius: 50px
2，如果你项目的背景色默认是白色的，你自己也没有给项目添加颜色，生成后的图片就是带透明效果，所以要给 html 添加一个白色背景颜色

3，第一种方法不需要自己单独下载 js 到本地项目中，第二种方法需要单独下载 js 文件

---

20210414

如果上面方法不管用的话，可以尝试如下方法，我就是这么解决的

1，下载新版本html2canvas.js，网上说旧版本导致不清晰https://blog.csdn.net/kouwoo/article/details/105529681?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

https://github.com/niklasvh/html2canvas/releases/tag/v1.0.0-alpha.9

或者是官网下载

http://html2canvas.hertzen.com/

2，js代码，代码来源https://segmentfault.com/q/1010000019461333

function createImg() {
            //创建一个新的canvas
            var canvas2 = document.createElement("canvas");
            //获取宽高
            var w = $('#jietu').width();
            var h = $('#jietu').height();

            html2canvas(document.querySelector('#jietu'), {
                scale: 2,
                dpi: window.devicePixelRatio * 2, // window.devicePixelRatio是设备像素比
            }).then(function(canvas) {

                var dataUrl = canvas.toDataURL();
                var newImg = document.createElement("img");
                newImg.src = dataUrl;

                newImg.width = w;
                newImg.height = h;

                $("#screenShotImg").show();
                $("#screenShotImg").html(newImg);
            });

            }

不能用下面的代码，不知道为什么，点击生成图片没反应

cdn可以，<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>，但是不清晰

本地不行<script src="/static/module/index/xin/js/html2canvas.js"></script>