html2canvas 将html代码转为图片--清晰度问题

最新推荐文章于 2023-06-21 11:14:34 发布

weixin_34384557

最新推荐文章于 2023-06-21 11:14:34 发布

阅读量439

点赞数

文章标签： javascript c# python ViewUI

原文链接：https://my.oschina.net/u/2393989/blog/1093953

版权

2019独角兽企业重金招聘Python工程师标准>>>

1，默认生成的 canvas 图片在 retina 设备上显示很模糊，处理成 2 倍图能解决这个问题

var w = $("#code").width();  
var h = $("#code").height();//要将 canvas 的宽高设置成容器宽高的 2 倍  
var canvas = document.createElement("canvas");  
    canvas.width = w * 2;  
    canvas.height = h * 2;  
    canvas.style.width = w + "px";  
    canvas.style.height = h + "px";  
var context = canvas.getContext("2d");//然后将画布缩放，将图像放大两倍画到画布上  
    context.scale(2,2);  
    html2canvas(document.querySelector("#code"), {          canvas: canvas,          onrendered: function(canvas) {                ...          }    });

2,js代码结构

var str = $('#html2canvas');  
//console.log(str);  
html2canvas([str.get(0)], {  
    onrendered: function (canvas) {  
        var image = canvas.toDataURL("image/png");  
        var pHtml = "<img src="+image+" />";  
        $('#html2canvas').html(pHtml);  
    }  
});

转载于:https://my.oschina.net/u/2393989/blog/1093953