//安裝
npm install --save html2canvas
//導入
import html2canvas from 'html2canvas'
1.在template模板中
 <template>
     <!-- 把要截圖的元素放在一個元素里,設置一個ref -->
     <section class="image_tofile" ref="imageTofile">
         <!-- 元素內部放置要合成圖片的內容 -->
         <img class="poster-img" :src="personalBill" alt="">
         <p class="poster-text">注意元素的樣式，有些樣式不能被截屏</p>
         <p class="poster-text">不要用背景圖片，用img標簽防止截圖模糊</p>
     </section>
</template>
//methods 使用
methods: {
    // 頁面元素轉圖片
    toImage() {
        // 第一個參數是需要生成截圖的元素,第二個是自己需要配置的參數,寬高等
        return html2canvas(this.$refs.imageTofile, {
            backgroundColor: null, // 背景顏色
            dpi: 192, // 將分辨率提高到特定的dpi,默認值為96
            scale: 2, // 用于渲染的比例尺。默認為瀏覽器設備像素比率。默認值是1，手機端設置成2
            useCORS:true, // 是否嘗試使用CORS從服務器加載圖像
        }).then((canvas) => {
            this.posterUrl = canvas.toDataURL('image/png')//獲取的圖片地址
        })
    },
},