vue.js純前端實現圖片下載/圖片合併（插件html2canvas）

前言

產品經理提了個需求，要將一張二維碼和不一樣海報合併，供客戶下載掃描。這個時候我們後端小姐姐偷懶了，以爲後端作太麻煩了，私下找我py一波，這個時候我又禁不住美女誘惑，沒辦法只能妥協前端來處理了。。。哎，作一個前端好累！！！話很少說，直接先上實現效果

實現效果

任選兩張圖片，佈局成已經合併好的樣子展現在前端頁面上，若是須要下載則調用js方法

下載成功後的效果

原理

其實原理很簡單主要就是利用canvas，將兩張圖片生成一張以及下載到本地

使用方法

1安裝插件 yarn add html2canvas或npm install html2canvas

2組件引入 import html2canvas from 'html2canvas'

3代碼示例

總結

總結啥總結的呀，功能實現後那必須到後端小姐姐那裏去炫技一波呀，看哥這又給你解決一麻煩，還不給哥遞茶，哈哈哈哈哈哈哈！！！