html转为图片插件: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);
});