HTML 使用html2Canvas0.4.0截取页面内容并转换成图片

一、了解wxml-to-canvas、canvas、Painter

最近在写一个功能，在微信小程序中点一下按钮就可以将页面截图保存，去微信开发社区找了一下，说是没有开放这个功能 o(╥﹏╥)o，只好想别的办法了。

首先考虑的是将页面生成 canvas，然后将 canvas 转换成图片保存到相册中。直接使用 canvas 画页面工作量太大了，看到微信官方文档有个扩展组 wxml-to-canvas。尝试了一下，到了表格那里做不下去了，因为 wxml-to-canvas 是通过代码字符串拼接的，只能写静态页面，里面不能使用 wx:for 和自定义组件。不过画海报之类的简单画面倒是一个不错的选择。

暂时没有想到其他办法，只好去手动使用 canvas 将页面画出来，结果 canvas 官方文档新旧案例、API放在一起，API也就一句话描述一下，draw()、setTextAlign、setTextBaseline 根本用不了，文档也没有说明新API具体怎么去使用，新文档做了什么修改。。。真的忍不住再多吐槽两句。

后来在社区里面看到有人使用 Painter 这个插件，去用了一下，也不错，但是，经过粗略自测，画布高度超过 1200 rpx（大概一屏幕多一点），内容就会被拉伸 o(╥﹏╥)o 不过跟 wxml-to-canvas 比较，优点还是挺多的：

传参更方便。wxml-to-canvas 的样式传参需要将样式写成 json 格式的字符串，然后再导出，较长页面样式也较多，这个过程容易出错；
Painter 对 css 包容性更强。wxml-to-canvas 中对 css 限制较多，且有一些可用样式官网上没有写完全，需要自己写页面时自测一下。
Painter 中可以使用单位 rpx，wxml-to-canvas的单位是 px，因此 wxml-to-canvas 需要自己做适配，而 Painter 不需要；
Painter 是一个自定义组件，不需要构建 npm 包，直接放到 components 文件中，使用方式跟自定义组件相同；

【原本还想写两篇使用wxml-to-canvas 、painter的笔记，现在只想偷个懒】

做到这里我是有点灰心了，因为第一次写小程序，这一个功能就让我卡了将近半个月，而且还没有完成。百度上倒是有对 H5 页面进行截图的插件 html2canvas ，于是去看了看文档，web-view 是官方提供的可以跟 H5 页面互通的组件。这样就可以在 H5 页面中使用 html2canvas 插件，将页面转换成图片，然后再传给小程序，在小程序中将图片保存到手机中。

二、 html2Canvas

我在项目中使用的是 html2Canvas0.4.0，由于项目着急，也没去使用别的版本。html2canvas官方文档（官网可以下载html2canvas.js 和 html2canvas.min.js）

html2canvas截屏在H5微信移动端踩坑，ios和安卓均可显示 - 文方草 - 博客园

案例：点击按钮，将指定页面内容生成 base64图片，并将图片地址插入到指定DOM元素中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 5界面</title>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/html2canvas041.js"></script>
  <style>
    html,body,div,p{margin:0;padding:0;}
    .box{width: 100%;height: 10rem;}
    #red{background-color: red;}
    #orange{background-color: orange;}
    #yellow{background-color: yellow;}
    #green{background-color: green;}
    #palegreen{background-color: palegreen;}
    #blue{background-color: blue;}
    #purple{background-color: purple;}
  </style>
</head>
<body>
  <button id="btns">下载图片</button>
  <div id="htmlcanvas">
    <div class="box" id="red"></div>
    <div class="box" id="orange"></div>
    <div class="box" id="yellow"></div>
    <div class="box" id="green"></div>
    <div class="box" id="palegreen"></div>
    <div class="box" id="blue"></div>
    <div class="box" id="purple"></div>
  </div>
  <div id="photo" style="display: none;"></div>
</body>
</html>
<script>
  $("#btns").on("click", function(){
    var htmlcanvas = document.getElementById("htmlcanvas");
    html2canvas(htmlcanvas,{
      onrendered: function(canvas){
        var img = new Image();
        img.src = canvas.toDataURL(); //生成base64图片
        document.getElementById("photo").appendChild(img);　    
        base64Canvas = canvas.toDataURL();
      }
    })
  });  
</script>

类似功能的博客：【功能实现】html2canvas.js 0.4.1版本使用demo（html转canvas并下载图片）_Dy1ngn的博客-CSDN博客_html2canvas.js下载
生成的canvas失真、模糊：使用html2canvas在前端生成图片 - 简书
其他版本html2Canvas：html2canvas截长图_kaijia323的博客-CSDN博客_html2canvas截长图

html2canvas 截长图并导出图片_小的笔记本的博客-CSDN博客_html2canvas 长图