html2canvas 插件实现网页截图(html保存为图片)

1、html2canvas 官网: http://html2canvas.hertzen.com/

html2canvas 是一款利用javascript进行屏幕截图的插件。可以使用两种语法格式进行截图:

  • 通过在 html2canvas(需要截图的元素).then(function(){}) 的方式向body中 append canvas 图形。

    html2canvas(document.getElementById('id'))
    .then(function(canvas) {document.body.appendChild(canvas);});
  • 通过 html2canvas(元素,{属性:属性值}) 的方式。
    html2canvas(document.getElementById("target"), {
      allowTaint: true, //允许污染
      taintTest: true, //在渲染前测试图片(没整明白有啥用)
      useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)
      background: "#fff",
      onrendered: function (canvas) {
        imgBlob = canvas.toDataURL('image/jpeg', 1.0); //将图片转为base64, 0-1 表示清晰度
        imgBlob = imgBlob.toString().substring(imgBlob.indexOf(",") + 1);//截取base64以便上传
      }
    });

    接下来看一个例子。

2.代码部分:

(1)css

#demo{
    background-color: #fff;
}
.red{
   background-color: red;
   width: 50px;
   height: 50px;
}

(2)html

<div class="demo-container">
    <div id="demo">
        <div class="red"></div>
        <p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p>
        <p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p>
        <p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p>
        <p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p>
        <p>如果原来使用百分比设置元素宽高,请更改为px为单位的宽高,避免样式二次计算导致的模糊</p>
    </div>		
</div>
<button id="saveImg">截图</button>

(3)js

<script src="js/common/jquery-2.1.4.js"></script>
<script src="./html2canvas.min.js"></script>
<script src="./canvas2image.js"></script>
<script type="text/javascript">
      $("#saveImg").on("click", function() {
        var getPixelRatio = function(context) {     // 获取设备的PixelRatio
            var backingStore = context.backingStorePixelRatio ||
                context.webkitBackingStorePixelRatio ||
                context.mozBackingStorePixelRatio ||
                context.msBackingStorePixelRatio ||
                context.oBackingStorePixelRatio ||
                context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
        };
        var shareContent = $("#demo")[0]; 
        var width = shareContent.offsetWidth; 
        var height = shareContent.offsetHeight; 
        var canvas = document.createElement("canvas"); 
        var context = canvas.getContext('2d'); 
        var scale = getPixelRatio(context);    //将canvas的容器扩大PixelRatio倍,再将画布缩放,将图像放大PixelRatio倍。
        canvas.width = width * scale; 
        canvas.height = height * scale;
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';
        context.scale(scale, scale);

        var opts = {
            scale: scale, 
            canvas: canvas,
            width: width, 
            height: height,
            dpi: window.devicePixelRatio
        };
        html2canvas(shareContent, opts).then(function (canvas) {
            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;
            var dataUrl = canvas.toDataURL('image/jpeg', 1.0);
            var newImg = document.createElement("img");
            newImg.src =  dataUrl;
            newImg.width = width;
            newImg.height= height;
            $("body")[0].appendChild(newImg);
          });

      })
</script>

上述代码中,通过设置canvas的容器为设备 的PixelRatio倍,再将canvas画布缩放,来尽量保证截图的清晰度。

3.demo效果:

(1)静态html

(2)点击截图按钮后,下方蓝色框框内即为截图效果:

4.参考文章:

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陌盍

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值