html2canvas保存图片模糊问题解决

使用官网的CDN：

<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

网上可以查到很多解决方案，常用的主要就是：canvas先放大，其次加个dpi效果也可以，代码如下：

var canvas = document.createElement("canvas"); 
var context = canvas.getContext("2d");
var scale = 4; 

canvas.width = 70 * scale;
canvas.height = 70 * scale;
        
canvas.getContext("2d").scale(scale, scale); 

var opts = {
    dpi: window.devicePixelRatio * 4,
    scale: scale, // 添加的scale 参数
    canvas: canvas, //自定义 canvas
    // logging: true, //日志开关，便于查看html2canvas的内部执行流程
    width: 70, //dom 原始宽度
    height: 70,
    useCORS: true // 【重要】开启跨域配置
};
html2canvas(document.querySelector("#capture"), opts).then(canvas => {
  document.body.appendChild(canvas);
});

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_3786