码迷,mamicode.com
首页 > Web开发 > 详细

html转为图片插件:html2canvas保存图片模糊问题解决

时间:2019-06-19 18:44:40      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:apt   tco   app   dev   问题解决   idt   child   etc   ogg   

  使用官网的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);
});

 

html转为图片插件:html2canvas保存图片模糊问题解决

标签:apt   tco   app   dev   问题解决   idt   child   etc   ogg   

原文地址:https://www.cnblogs.com/goloving/p/11053109.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!