html2canvas插件生成海報工具

時間 2020-07-25

標籤 html2canvas html canvas 插件生成海報工具欄目 HTML 简体版

原文原文鏈接

html2canvas文檔官網: http://html2canvas.hertzen.com/documentation/css

html2canvas插件把相應的DOM節點裏的全部元素按其屬性來構建,生成截圖,有些css屬性它沒法識別(理解不了),因此產生會有點誤差,不過問題不大html

侷限性: 使用的全部圖像都須要在同一資源下,即最好不要跨域npm

瀏覽器兼容:

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

安裝及引入:

npm install html2canvascanvas

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會將它們從渲染中排除。(不知道啥意思)服務器

例子:

 1 <div class="share">
 2     <div class="imageWrapper" ref="imageWrapper">
 3       <img class="real_pic" :src="dataURL" />
 4       <!-- 須要轉化爲圖片的DOM元素 -->
 5       <slot>
 6         <div class="canvas-bg">
 7           <img class="canvas-title" src="@/images/canvas-title.png" alt />
 8           <div class="canvas-info">
 9             <div class="info-content">
10               <span>我叫</span>
11               <span>{{ userInfo.name }}</span>
12             </div>
13             <div class="info-content">
14               <span>來自</span>
15               <span>{{ userInfo.userSchool }}</span>
16             </div>
17             <div class="info-content">在網上老年大學</div>
18             <div class="info-content">
19               <span>學習</span>
20               <span class="study-day">{{ userInfo.study_day }}</span>
21               <span>天啦</span>
22             </div>
23           </div>
24           <div class="canvas-footer">
25             <div class="canvas-user">
26               <img :src="userInfo.user_image" alt />
27             </div>
28           </div>
29           <div class="canvas-er">
30             <img :src="userInfo.share_qrcode" alt />
31             <div class="text">長按保存圖片</div>
32             <div class="text">掃碼一塊兒學習</div>
33           </div>
34         </div>
35       </slot>
36     </div>
37     <div class="watermark">長按海報保存圖片</div>
38   </div>

html代碼

  1 .share {
  2   font-family: Source Han Sans CN;
  3   position: relative;
  4   .imageWrapper {
  5     min-height: 100vh;
  6     background: url("../images/canvas-bg.png") no-repeat;
  7     background-size: 100% 100%;
  8     position: relative;
  9     .real_pic {
 10       width: 100%;
 11       height: 100%;
 12       position: fixed;
 13       top: 0;
 14       bottom: 0;
 15       left: 0;
 16       right: 0;
 17       z-index: 88;
 18       opacity: 0;
 19     }
 20   }
 21   .show-msg{
 22     position: fixed;
 23     top: 0;
 24     right: 0;
 25     left: 0;
 26     bottom: 0;
 27     display: flex;
 28     justify-content: center;
 29     align-items: center;
 30     font-size: 1.5rem /* 24/16 */;
 31     color: white;
 32     .msg{
 33       width: 15.3125rem /* 245/16 */;
 34       height: 3.125rem /* 50/16 */;
 35       line-height: 3.125rem /* 50/16 */;
 36       text-align: center;
 37       background: rgba(0,0,0,.6);
 38       border-radius: .3125rem /* 5/16 */;
 39     }
 40   }
 41 }
 42 .canvas-bg {
 43   min-height: 100%;
 44   padding-top: 3.40625rem /* 54.5/16 */;
 45   padding-left: 1.875rem;
 46   .canvas-title {
 47     width: 16.6875rem /* 267/16 */;
 48     height: 10.3125rem /* 165/16 */;
 49     margin-bottom: 2.15625rem;
 50   }
 51   .canvas-info {
 52     font-size: 1.1875rem;
 53     font-family: Source Han Sans CN;
 54     font-weight: 400;
 55     color: rgba(255, 255, 255, 1);
 56     margin-bottom: 45.5px;
 57     .info-content {
 58       margin-bottom: 0.5125rem; /* 30/16 */
 59       & span:nth-child(2) {
 60         font-size: 1.1875rem /* 19/16 */;
 61         font-family: Source Han Sans CN;
 62         font-weight: bold;
 63         color: rgba(254, 207, 84, 1);
 64         margin-left: 5px;
 65         margin-right: 5px;
 66       }
 67       .study-day{
 68         font-size: 1.5rem !important;
 69       }
 70     }
 71   }
 72   .canvas-er {
 73     max-width: 6.75rem /* 108/16 */;
 74     padding-bottom: 5.90625rem /* 94.5/16 */;
 75     z-index: 99;
 76     img {
 77       width: 100%;
 78       height: 100%;
 79       margin-bottom: 0.625rem /* 17/16 */;
 80       background: white;
 81       border-radius: 0.625rem /* 10/16 */;
 82       overflow: hidden;
 83     }
 84     .text {
 85       font-size: 0.9375rem /* 15/16 */;
 86       font-family: Source Han Sans CN;
 87       font-weight: 400;
 88       color: rgba(255, 255, 255, 1);
 89       text-align: center;
 90     }
 91   }
 92   .canvas-footer {
 93     width: 13.625rem /* 218/16 */;
 94     height: 22.8438rem;
 95     position: absolute;
 96     bottom: 0;
 97     right: 0;
 98     background: url("../images/canvas-people.png") no-repeat;
 99     background-size: 100% 100%;
100     border: none;
101     .canvas-user {
102       position: absolute;
103       top: -0.3125rem /* 5/16 */;
104       right: 1.425rem;
105       width: 5.8875rem /* 94.2/16 */;
106       height: 5.8875rem /* 94.2/16 */;
107       border: 2px solid rgba(255, 255, 255, 1);
108       border-radius: 100%;
109       overflow: hidden;
110       display: flex;
111       justify-content: center;
112       align-items: center;
113       img {
114         width: 100%;
115         height: 100%;
116       }
117     }
118   }
119 }
120 .watermark{
121   font-size: 1.25rem /* 20/16 */;
122   font-family:Source Han Sans CN;
123   font-weight: bold;
124   color:rgba(255,255,255,0.3);
125   position: absolute;
126   bottom: 1.875rem /* 30/16 */;
127   left: 2rem /* 32/16 */;
128 }

該頁面的css代碼

只要是在 'imageWrapper' 節點外面的元素就不會被一塊兒繪製生成海報,以後把整個畫布鋪滿頁面,層級最高,再設置透明度爲0,就能夠長按保存啦.網絡

 1 html2canvas(this.$refs.imageWrapper, {
 2     backgroundColor: null, 
 3     allowTaint: true, //是否容許跨域圖片
 4     useCORS: true,
 5     taintTest: true
 6 })
 7 .then(canvas => {
 8     let dataURL = canvas.toDataURL("image/png");　　//轉成base64
 9     this.dataURL = dataURL;　//在img的src中使用
10 })

在mounted的時候調用生成便可,圖片加載有時候會比較慢,能夠再加個延時器app

問題總結:ide

　　1. 一開始是使用跨域的圖片,時而生成的圖片會沒有相應的圖片什麼的,我就把它轉換成base64的圖片

 1     conUrlBase64(len,url) {
 2       //網絡資源圖片轉成base64
 3       //console.log("圖片路徑",url)
 4       var canvas = document.createElement("canvas"); //建立canvas DOM元素
 5       var ctx = canvas.getContext("2d");
 6       return new Promise((reslove, reject) => {
 7         var img = new Image();
 8         img.crossOrigin = "Anonymous";
 9         img.onload = function() {
10           canvas.height = len; //指定畫板的高度,自定義
11           canvas.width = len; //指定畫板的寬度，自定義
12           ctx.drawImage(img, 0, 0, len, len);
13           var dataURL = canvas.toDataURL("image/");
14           canvas = null;
15           reslove(dataURL);
16         };
17         img.onerror = function(err){
18           reject(err)
19         }
20         img.src = url;
21       });
22     }