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卻沒有,還未解決,讓設計換了切圖也還是會有,不知道是不是兼容性問題還是我的樣式寫的問題