在vue項目中基於html2canvas實現網頁保存爲圖片

html2canvas 可以實如今前端直接對頁面進行截屏。其實現思路是html2canvas腳本將頁面元素渲染爲canvas，經過讀取DOM並將不一樣的樣式應用到這些元素上實現。它不須要服務端的操做，只在前端便可完成。

1、在項目中的使用

1. 安裝html2canvas

npm install --save html2canvas
複製代碼

2. 在項目中使用

// 在須要使用的頁面中先引入html2canvas
 import html2canvas from 'html2canvas'
複製代碼

而後在頁面中使用，以下：

在template模板中，設置要生成圖片的內容，本文中要生成圖片的是ref="capture"的div，而後將生成的canvas圖片展現在ref="addImage"的div中

<template>
    <div class="content" ref="addImage">
        <div ref="capture" class="image-content">
            <p>html2canvas 可以實如今前端直接對頁面進行截屏。</p>
            <p>其實現思路是html2canvas腳本將頁面元素渲染爲canvas，經過讀取DOM並將不一樣的樣式應用到這些元素上實現。</p>
            <p>它不須要服務端的操做，只在前端便可完成。</p>
        </div>     
          <div @click="generatorImage" class="img-btn">生成圖片</div>
    </div>
</template>
複製代碼

而後在js文件中，generatorImage方法實現html到圖片的轉換,此時便可看到頁面尾部已經添加了生成的圖片內容,也能夠對圖片轉爲base64編碼並下載到本地。

generatorImage () {
            html2canvas(this.$refs.capture).then(canvas => { 
                 this.$refs.addImage.append(canvas);  
                 let link = document.createElement('a');
                 link.href = canvas.toDataURL();
                 link.setAttribute('download', '圖片canvas.png');
                 link.style.display = 'none';
                 document.body.appendChild(link);
                 link.click();
            })
        }
複製代碼

2、html2canvas存在跨域資源沒法加載

若是要生成圖片的dom元素中，包含有跨域資源，好比img標籤中的跨域圖片,經過上述方法生成的圖片中，img的內容是空白的，沒法生成，這是由於canvas對於圖片資源的同源限制。

解決方法： html2canvas能夠設置配置項，來實現圖片的加載

1.allowTaint設置成true，便可實現圖片的展現

allowTaint爲true是容許canvas被污染,一旦畫布污染，就沒法讀取其數據，不能使用畫布的toBolb(),toDataURL()或getImageData()方法，不然會出錯.

若是咱們只是展現在頁面上，不經過js轉爲文件下載到本地（下載須要調用canvas.toDataURL()方法），則可使用該方法。（頁面中右鍵能夠將這張圖片無缺的保存到本地）

2.經過服務端設置CORS

解決跨域最經常使用的方法是跨域資源共享，咱們將圖片服務器的response header設置

access-control-allow-origin: *，
複製代碼

便可解決跨域圖片的訪問，同時，配合html2canvas的配置項useCORS: true，便可實現canvas圖片的轉化和下載。 因爲咱們本身項目的文件服務器暫時沒有設置CORS，因此此處例子採用淘寶的圖片

<template>
    <div class="content" ref="addImage">
        <div ref="capture" class="image-content">
            <div class="parent">
             <img src='https://user-gold-cdn.xitu.io/2018/12/18/167c06ce8cf413d1?w=476&h=260&f=webp&s=11552'>
            </div>
            <div class="parent">
                <img src='https://user-gold-cdn.xitu.io/2018/12/18/167c06ce8d058da5?w=140&h=140&f=png&s=563'>
            </div>
            <div class="parent">
                <img src='https://user-gold-cdn.xitu.io/2018/12/18/167c06ce8da5216c?w=160&h=280&f=webp&s=10926'>
            </div>
        </div>     
          <div @click="generatorImage" class="img-btn">生成圖片</div>
    </div>
</template>
複製代碼

js文件中：

generatorImage () {
            html2canvas(this.$refs.capture,{useCORS: true}).then(canvas => { 
              this.$refs.addImage.append(canvas);
              // 經過a標籤下載到本地
                 let link = document.createElement('a');
                 link.href = canvas.toDataURL();
                 link.setAttribute('download', '圖片canvas.png');
                 link.style.display = 'none';
                 document.body.appendChild(link);
                 link.click();
            })
        }
複製代碼