zoukankan      html  css  js  c++  java
  • 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的内部执行流程
         70, //dom 原始宽度
        height: 70,
        useCORS: true // 【重要】开启跨域配置
    };
    html2canvas(document.querySelector("#capture"), opts).then(canvas => {
      document.body.appendChild(canvas);
    });
  • 相关阅读:
    新男人八题---AStringGame
    hihocoder1457
    SPOJ
    后缀自动机
    牛客练习赛13D
    Educational Codeforces Round 38
    Binary Differences
    laravel 带条件的分页查询
    url添加时间戳
    安卓无法上传照片
  • 原文地址:https://www.cnblogs.com/goloving/p/11053109.html
Copyright © 2011-2022 走看看