我們經(jīng)常會(huì)遇上動(dòng)態(tài)生成海報(bào)的需求，而在Web前端中，生成圖片非Canvas莫屬。但是在實(shí)際工作當(dāng)中，為了追求效率，我們會(huì)不可避免地去使用一些JS插件，而html2canvas.js就是一款優(yōu)秀的插件，它可以輕松地幫你將HTML代碼轉(zhuǎn)換成Canvas，進(jìn)而生成可保存分享的圖片。

具體如何使用這款插件呢？接下來請(qǐng)讓我用一個(gè)簡(jiǎn)單的示例來為大家講解。

現(xiàn)在假設(shè)要生成如下圖片，而所有圖片和文字都是動(dòng)態(tài)獲取的。

按照需求，我們無法使用PS去合成元素，只能通過代碼動(dòng)態(tài)生成，這時(shí)就可以用到html2canvas.js了。

1. 布局

<div id="qianduanwz">
  <img src="./images/qrcode.jpg" alt="">
  <p>學(xué)習(xí)Web前端<br>關(guān)注前端微站</p>
</div>

<style>
  #qianduanwz{ width: 900px; height: 383px; text-align: center; background: 
    url("./images/bg.jpg") no-repeat center;}
  #qianduanwz img{ width: 200px; margin-top: 60px;}
  #qianduanwz p{ margin: 0; padding-top: 10px; font-size: 20px; color: #fff;}
</style>

2. 轉(zhuǎn)換Canvas并導(dǎo)出圖片

<script src="./scripts/html2canvas.js"></script>
<script>
  new html2canvas(document.getElementById('qianduanwz')).then(canvas => {
    // canvas為轉(zhuǎn)換后的Canvas對(duì)象
    let oImg = new Image();
    oImg.src = canvas.toDataURL();  // 導(dǎo)出圖片
    document.body.appendChild(oImg);  // 將生成的圖片添加到body
  });
</script>

html2canvas.js用法其實(shí)很簡(jiǎn)單，通常情況下只需傳入需要轉(zhuǎn)換的DOM對(duì)象就可以了。如果你對(duì)canvas導(dǎo)出圖片有疑惑，可以看之前寫的一篇文章→教你使用Canvas處理圖片。

3. 可能出現(xiàn)的問題及相應(yīng)解決方案

① 圖片模糊問題

有時(shí)候我們會(huì)發(fā)現(xiàn)，導(dǎo)出的圖片局部有些圖片看起來沒有原圖那么清晰，這其實(shí)是因?yàn)槟闶褂帽尘皥D片的原因。解決方法也很簡(jiǎn)單，就是直接使用<img>標(biāo)簽就好了（比如上面示例中的背景圖最好是用<img>來替代）。

② 圖片不顯示問題

有時(shí)你可能莫名其妙地發(fā)現(xiàn)有些圖片并沒有出現(xiàn)在導(dǎo)出的圖片中，這基本上就是因?yàn)閳D片素材出現(xiàn)跨域，也就是說圖片所在的域名與你項(xiàng)目所在域名不一致。這個(gè)問題的解決方案就是html2canvas使用時(shí)多加以下兩個(gè)配置項(xiàng)就好了。

allowTaint: true,
useCORS: true 

上面例子添加配置項(xiàng)后的代碼如下：

new html2canvas(document.getElementById('qianduanwz'), {
  allowTaint: true,
  useCORS: true 
}).then(canvas => {
   // ……
});

③ PNG圖片不透明問題

有時(shí)你可能用到透明的PNG圖片作為背景圖，可是結(jié)果最后生成的圖片卻并不透明，這是因?yàn)?code>html2canvas生成的canvas背景顏色默認(rèn)為白色的緣故，所以導(dǎo)出的圖片背景顏色當(dāng)然也是白色。

解決方案也是添加一個(gè)配置項(xiàng)就好（事實(shí)上經(jīng)實(shí)驗(yàn)發(fā)現(xiàn)只要是非顏色類型的字符串都可以）。

backgroundColor: "transparent"

上面例子添加配置項(xiàng)后的代碼如下：

new html2canvas(document.getElementById('qianduanwz'), {
  backgroundColor: "transparent",
  allowTaint: true,
  useCORS: true 
}).then(canvas => {
   // ……
});

④ 在iOS系統(tǒng)部分瀏覽器中，用<br>標(biāo)簽進(jìn)行文字換行時(shí)，文本只顯示第一行的問題

這種現(xiàn)象并不是必現(xiàn)的，但確實(shí)存在這樣的問題，這時(shí)解決問題的方式也很簡(jiǎn)單，就是不用<br>標(biāo)簽來?yè)Q行，而是采用其他塊級(jí)標(biāo)簽元素對(duì)需要進(jìn)行換行的文字分別包裹即可。

例如：

想學(xué)習(xí)前端，<br>可關(guān)注微信公眾號(hào)：前端微站

可寫成：

<ul>
    <li>想學(xué)習(xí)前端，</li>
    <li>可關(guān)注微信公眾號(hào)：前端微站</li>
</ul>

重點(diǎn)總結(jié)

① 生成圖片的HTML盡量使用<img>而不使用背景圖
② { allowTaint: true, useCORS: true }可解決跨域圖片不顯示問題
③ { backgroundColor: "transparent" }可解決圖片不透明問題