画出网页美图！HTML2Canvas的神奇截图功能大揭秘

2024-03-29 技术资讯推广

转换代码到图片使用html2canvas，这是一个非常著名的从浏览器网页截图的开源库，使用很方便，功能也很强大。1.html代码结构2.js代码结构将html代码转为图片的使用方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及

你想过没？要是代码能跟画画似的，随随便便就能创作出来那该多好！特别是HTML这种网页设计里用到的东西，要是也能变成图案漂亮的图片，那样子得多美呀。

那要咋用这个炫酷功能？别急让我教你。首先得用上一个很厉害的开源库——html2canvas。它虽然厉害但特别好用！

html2canvas真的是个截图神器！只要传入一个DOM元素，运行下就能得到画布，简直就像网页截图一样，超易上手。

记住，用这个API要注意两点。首先，你得先用html2canvas搞定元素的实际图形，这样才能整个复制出来，明白了吗？所以想全部截取的话，还得”提它出来”，设置成position:absolute就可以了！

告诉你个秘密原版的 canvas 绘画在高档电脑上看起来稍微有点模糊，别担心只要把它尽量放大就能解决，是不是很好用？

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) 
{                ...        
  }    
});

别急，还有！我们来聊聊html2canvas怎么用。

记住，先搞定HTML建网页，再学JS搞小游戏。看下来，多试几个例子，你就能轻松驾驭html2canvas咯！

  
html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas  
  
html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas

这个软件叫html2canvas，听起来就很潮是？厉害得很！想用吗？容易到不行。不过记住两点，先来瞧瞧 html2canvas怎么牛好了

希望这篇文章能帮到你们，有啥不懂的就留言问我！我会尽快回哒。谢谢大家一直以来对咱网站的支持和喜欢，别忘了多赞多转

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