发新话题
打印

解决html2canvas 图片模糊的问题

解决html2canvas 图片模糊的问题

<body>
<div class="app" id="app" v-cloak>
    <div class="top_bg"></div>
    <div class="middle_bg1"></div>
    <div class="middle_bg2"></div>
</div>
<div class="pic" id="img">
<img src="">
<div class="save_tips">图片生成成功<br>长按可保存到本地或发送给好友</div>
</div>
</body>

js方法:
downLoad: function(){
            var content = $('#app');
    var _width = $('#app').width(),
        _height = $('#app').height();
 
    var canvas = document.createElement("canvas");
    var scale = 5.5; //放大倍数
    canvas.width = _width * scale;
    canvas.height = _height * scale;
    canvas.getContext("2d").scale(scale, scale);
            $(".create_img").hide();
            $(".info").css("top","0.4rem");
            document.body.scrollTop = document.documentElement.scrollTop = 0;
            var w = $('#app').outerWidth(),
            h = $('#app').outerHeight();
            html2canvas($('#app'),{
            allowTaint: true,
          useCORS: true,
            scale: scale,
        canvas: canvas,
        width: _width,
        heigth: _height,
        dpi: window.devicePixelRatio * 96,
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
                $("canvas").hide();
                convertCanvasToImage(canvas);
            }
        });
        function convertCanvasToImage(canvas) {
        var image = new Image();
        image.setAttribute("crossOrigin",'Anonymous');
        image.src = canvas.toDataURL();
        $(".pic img").attr({"src":image.src});
        $(".pic img").css("width","7.5rem");
        $(".pic").show();
        $("#app").hide();
        return image;
    }
            }
    }

TOP

发新话题