tml2canvas是一个用于html截屏的js插件，在网站切图项目中不太常见，以至于在遇到问题的时候，能够被查阅到的有用信息很少，这次是一个很复杂的使用案例，进行了多次的截屏、拼接、再截屏，并且解决了截屏错位空白问题，增加了保存图片到本地的有效代码方案。

其中关于截屏空白的问题（页面有下拉的时候产生），先后查阅了国内外资料后找到了有效解决方案，颇为曲折。

/*第一次把图标截图放到模板里*/
html2canvas(document.querySelector(".tjqx-bars "),{
//height:850,
//y:window.pageYOffset,
}).then(canvas => {

$('#captureimg').html(canvas);

/*第二次把模板整个截图*/
html2canvas(document.querySelector("#capturetmpl"),{
//height:1240,
//y:window.pageYOffset,
scrollX: 0,
scrollY: -window.scrollY,
}).then(canvas => {
//canvas.setAttribute('id','thecanvas');
$('#capture').html(canvas);

//图片写到body临时存储
var dataURL = canvas.toDataURL();
$(document.body).data('url', dataURL);

//Canvas2Image.saveAsPNG(canvas);

//var dataURL = canvas.toDataURL("image/png");
//console.log(dataURL);
//$(document.body).data('url', dataURL);
//var tmpUrl = "data:application/octet-stream;base64" + dataURL;
// $('.kzdialog-fz').attr('href', tmpUrl);

//关闭
layer.close(index);
});

 

 

//复制图片提示
$('.kzdialog-fz').click(function(){

var url = $(document.body).data('url');

$("<a>", {
href: url,
download: "fileName"
})
.on("click", function() {$(this).remove()})
.appendTo("body")[0].click();

//var oCanvas = document.getElementById("thecanvas");
//Canvas2Image.saveAsPNG(oCanvas);



//layer.msg('复制成功');
//layer.msg('复制图片失败 请重试');
})

标签：html2canvas

求来源

项目开发过程中，你可能会遇到用户需要保存当前页面的内容，但是用户又不想自己通过手机系统手动截图；又或者，你想分享当前页面的内容，把它当做一个海报分享，那这个时候就需要通过程序员来帮你完成前期操作，这个时候就用到了H5快照功能，具体情况如下。

html源码

<div class="mainBox">
  <div class="contentBox" id="need">
    <img src="images/1.jpg" />
    <div class="mainText1">
      菩提本无树，明镜亦非台。<br>
      佛性常清净，何处有尘埃！<br>
      身是菩提树，心如明镜台。<br>
      明镜本清净，何处染尘埃！<br>
      菩提本无树，明镜亦非台。<br>
      本来无一物，何处惹尘埃！<br>
      菩提只向心觅，何劳向外求玄？<br>
      听说依此修行，西方只在目前！
    </div>
    <div class="mainText2">Bodhi has no trees, and a mirror is not a platform.There's nothing in the world, where to get dust!</div>
  </div>
  <div class="btn">下载</div>
  <img src="" class="uploadImg" />
</div>

js源码

截图功能需要依赖于canvas2image.js和html2canvas.js

首先在页面中引入这两个js，当然，如果你需要用到jq，同时还要引入jquery依赖

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/canvas2image.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript">
  $(".btn").click(function(){
    var need = $("#need").get(0);
    html2canvas(need, {
       useCORS: true,          //允许跨域
       allowTaint: false,       //允许跨域数据污染'被污染'的canvas
       taintTest: true,
       scale: 1                      //比例，越大分辨率越高，图片越小
     }).then(function(canvas) {
        // canvas宽度
        var canvasWidth = $("#need").width();
        // canvas高度
        var canvasHeight = $("#need").height();
            // 调用Canvas2Image插件
            let w = $("#need").width(); //图片宽度
            let h = $("#need").height();
            // 将canvas转为图片
            var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
            // var img = Canvas2Image.convertToJPEG(canvas, canvasWidth, canvasHeight)
            $(".uploadImg").attr("src",img.src);// 渲染图片，并且加到页面中查看效果
            // 保存
            saveFile(img.src, 'richer.png');
    });
  })
// 保存文件函数
  var saveFile = function(data, filename){
      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      save_link.href = data;
      save_link.download = filename;
      var event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      save_link.dispatchEvent(event);
  };

</script>

截取图片不能显示问题

在项目测试过程中，可能有的同学会遇到截取图片，截取成功后文字能显示，但是图片显示不出来的问题。这个问题我在上面的js中也有所标注，主要是跨域问题。

在你设置useCORS: true, 为图，允许跨域的前提下，你的项目还要运行在环境中才能完全显示图片。环境中运行很重要，你可以在本地部署服务，或者放到一个线上的服务器中运行，这样测试，就是ok了，当然，后续你的项目放在正式环境中，那肯定也是ok的。

搬你想搬，盖你所需，码字不易，且行且珍惜！

网页上生成一个便于用户分享的精美海报，或者对于网页内容生成截图，现在已经是一个非常常见的需求，现在怎么实现呢？

生成海报很麻烦

生成网页截图和海报一般都有两种做法，一是服务端使用 GD 库生成，二是前端使用 Canvas 生成，但是这两种方法都比较麻烦。

服务端通过 GD 库去生成的话，首先要去查 GD 库相关的大量函数，然后图片的坐标，文字的换行等等都要仔细去算，一点点修改，都要重新算一遍，非常难受。

而前端使用 Canvas 生成的话，就需要熟悉 Canvas 的语法，它的 API 比较复杂，有大量的方法和属性，让很多希望通过 Canvas 画图的同学望而却步。

那么有没有什么简单的方法生成海报呢？不需要学习太多新知识，利用现有的知识就实现的呢？

html2canvas

有的，html2canvas 就是这样的一个 Javascript 库，无需大量学习，只需要会 HTML 和 CSS 即可，html2canvas 可以把网页元素或者整个网页转换为一个 Canvas 对象或者图片。

html2canvas 是通过在浏览器端解析 HTML 和 CSS 来实现这个功能，不需要任何服务器端的支持，然后也不需要对 Canvas 相关的方法深入的学习，只需要懂简单的 HTML 和 CSS 即可。

总结一下，下面是 html2canvas 的一些主要优势：

1. 无需后端支持：html2canvas 完全在客户端运行，无需任何服务器端的支持。这使得它非常适合在各种环境中使用，包括静态网页和单页应用。
2. 灵活且强大：你可以指定截图的元素，包括整个网页或者特定的 DOM 元素。此外，html2canvas 还支持多种 CSS 属性，包括 z-index、overflow、CSS transforms 和 CSS filters 等。
3. 跨浏览器兼容性：html2canvas 支持所有主流的浏览器，包括 Chrome、Firefox、Safari 和 IE11+。
4. 丰富的功能：html2canvas 提供了一系列的选项和API，使得你可以对截图过程进行深度定制，包括修改截图的尺寸、忽略特定元素、添加背景颜色等。
5. 源码开放：html2canvas 是开源的，你可以查看和修改它的源代码，甚至为它贡献代码。

但是也需要注意的是，由于 html2canvas 是通过解析 HTML 和 CSS 来生成截图的，所以它无法完美地复制所有的渲染效果，特别是一些复杂的 CSS 样式和动态内容。

几行代码

首先加载 html2canvas 对应的 JavaScript 库：

<script type='text/javascript' src='https://cdn.staticfile.org/html2canvas/1.4.1/html2canvas.js'></script>

然后选择对应的网页元素生成屏幕截图：

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

就是这么简单，几行代码就实现。