html2canvas插件生成海报工具

html2canvas文档官网: http://html2canvas.hertzen.com/documentation/

html2canvas插件把相应的DOM节点里的所有元素按其属性来构建,生成截图,有些css属性它无法识别(理解不了),所以产生会有点偏差,不过问题不大

局限性: 使用的所有图像都需要在同一资源下,即最好不要跨域

浏览器兼容:  

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9 +
• Edge
• Safari 6+

安装及引入: 

    npm install html2canvas

    import html2canvas from 'html2canvas'

    html2canvas(document,option).then(canvas=>{......})

document 即是需要绘制的节点, option 为一些可选择配置

option可用参数:

参数名称	类型	默认值	描述
allowTaint	boolean	false	是否允许跨域
background	string	#ffffff	画布的背景色,如果没有在DOM中指定,将设置为透明
canvas	document	null	现有canvas元素用作绘图的基础
imageTimeout	number	15000	加载图像的超时时间(单位: 毫秒),设置为0为禁用超时
timeout	number	0	图片加载延时,默认延时为0(单位: 毫秒)
logging	boolean	true	在console.log()输出以进行调试
proxy	string	undefined	设置跨域代理地址,如果留空则不会加载跨域图像
taintTest	boolean	true	是否在渲染前测试图片
useCORS	boolean	false	是否尝试使用CORS从服务器加载图像(也是跨域图像,我使用的时候未成功,原因未知)
width	number	null	画布宽度
height	number	null	画布高度

如果希望Element从渲染中排除某些s，则可以data-html2canvas-ignore向这些元素添加属性，并且html2canvas会将它们从渲染中排除。(不知道啥意思)

例子: 

<div class="share">
    <div class="imageWrapper" ref="imageWrapper">
      <img class="real_pic" :src="dataURL" />
      <!-- 需要转化为图片的DOM元素 -->
      <slot>
        <div class="canvas-bg">
          <img class="canvas-title" src="@/images/canvas-title.png" alt />
          <div class="canvas-info">
            <div class="info-content">
              <span>我叫</span>
              <span>{{ userInfo.name }}</span>
            </div>
            <div class="info-content">
              <span>来自</span>
              <span>{{ userInfo.userSchool }}</span>
            </div>
            <div class="info-content">在网上老年大学</div>
            <div class="info-content">
              <span>学习</span>
              <span class="study-day">{{ userInfo.study_day }}</span>
              <span>天啦</span>
            </div>
          </div>
          <div class="canvas-footer">
            <div class="canvas-user">
              <img :src="userInfo.user_image" alt />
            </div>
          </div>
          <div class="canvas-er">
            <img :src="userInfo.share_qrcode" alt />
            <div class="text">长按保存图片</div>
            <div class="text">扫码一起学习</div>
          </div>
        </div>
      </slot>
    </div>
    <div class="watermark">长按海报保存图片</div>
  </div>

.share {
  font-family: Source Han Sans CN;
  position: relative;
  .imageWrapper {
    min-height: 100vh;
    background: url("../images/canvas-bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .real_pic {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 88;
      opacity: 0;
    }
  }
  .show-msg{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem /* 24/16 */;
    color: white;
    .msg{
      width: 15.3125rem /* 245/16 */;
      height: 3.125rem /* 50/16 */;
      line-height: 3.125rem /* 50/16 */;
      text-align: center;
      background: rgba(0,0,0,.6);
      border-radius: .3125rem /* 5/16 */;
    }
  }
}
.canvas-bg {
  min-height: 100%;
  padding-top: 3.40625rem /* 54.5/16 */;
  padding-left: 1.875rem;
  .canvas-title {
    width: 16.6875rem /* 267/16 */;
    height: 10.3125rem /* 165/16 */;
    margin-bottom: 2.15625rem;
  }
  .canvas-info {
    font-size: 1.1875rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 45.5px;
    .info-content {
      margin-bottom: 0.5125rem; /* 30/16 */
      & span:nth-child(2) {
        font-size: 1.1875rem /* 19/16 */;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: rgba(254, 207, 84, 1);
        margin-left: 5px;
        margin-right: 5px;
      }
      .study-day{
        font-size: 1.5rem !important;
      }
    }
  }
  .canvas-er {
    max-width: 6.75rem /* 108/16 */;
    padding-bottom: 5.90625rem /* 94.5/16 */;
    z-index: 99;
    img {
      width: 100%;
      height: 100%;
      margin-bottom: 0.625rem /* 17/16 */;
      background: white;
      border-radius: 0.625rem /* 10/16 */;
      overflow: hidden;
    }
    .text {
      font-size: 0.9375rem /* 15/16 */;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
  }
  .canvas-footer {
    width: 13.625rem /* 218/16 */;
    height: 22.8438rem;
    position: absolute;
    bottom: 0;
    right: 0;
    background: url("../images/canvas-people.png") no-repeat;
    background-size: 100% 100%;
    border: none;
    .canvas-user {
      position: absolute;
      top: -0.3125rem /* 5/16 */;
      right: 1.425rem;
      width: 5.8875rem /* 94.2/16 */;
      height: 5.8875rem /* 94.2/16 */;
      border: 2px solid rgba(255, 255, 255, 1);
      border-radius: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.watermark{
  font-size: 1.25rem /* 20/16 */;
  font-family:Source Han Sans CN;
  font-weight: bold;
  color:rgba(255,255,255,0.3);
  position: absolute;
  bottom: 1.875rem /* 30/16 */;
  left: 2rem /* 32/16 */;
}

只要是在 'imageWrapper' 节点外面的元素就不会被一起绘制生成海报,之后把整个画布铺满页面,层级最高,再设置透明度为0,就可以长按保存啦.

html2canvas(this.$refs.imageWrapper, {
    backgroundColor: null, 
    allowTaint: true, //是否允许跨域图片
    useCORS: true,
    taintTest: true
})
.then(canvas => {
    let dataURL = canvas.toDataURL("image/png");　　//转成base64
    this.dataURL = dataURL;　//在img的src中使用
})

在mounted的时候调用生成即可,图片加载有时候会比较慢,可以再加个延时器

问题总结:

　　1. 一开始是使用跨域的图片,时而生成的图片会没有相应的图片什么的,我就把它转换成base64的图片

    conUrlBase64(len,url) {
      //网络资源图片转成base64
      //console.log("图片路径",url)
      var canvas = document.createElement("canvas"); //创建canvas DOM元素
      var ctx = canvas.getContext("2d");
      return new Promise((reslove, reject) => {
        var img = new Image();
        img.crossOrigin = "Anonymous";
        img.onload = function() {
          canvas.height = len; //指定画板的高度,自定义
          canvas.width = len; //指定画板的宽度，自定义
          ctx.drawImage(img, 0, 0, len, len);
          var dataURL = canvas.toDataURL("image/");
          canvas = null;
          reslove(dataURL);
        };
        img.onerror = function(err){
          reject(err)
        }
        img.src = url;
      });
    }

    这里使用Promise, 方便后面如果有多张需要转换的图片,使用Promise.all()  一次转换,终身收益

    2. 我写完后安卓手机生成的海报图片会有一条线,iOS却没有,还未解决,让设计换了切图也还是会有,不知道是不是兼容性问题还是我的样式写的问题