html2canvas
前言：前端保存頁面為圖片，最常見的方案都是利用html2canvas來生成圖片。
應用場景
PM要求將公司子公司...獲得的一些獎項，前端按要求展示；並且要把H5頁面的局部保存圖片分享出去。
解決方案：html2canvas
使用：
npm install --save html2canvas- 將html2canvas引入到組件中
import html2canvas from "html2canvas"
具體：
取局部dom節點作為轉換圖片的繪制：<div ref="canvasImgObj" class="jiangzhuang-item">
canvasImgObj需要是你想轉換的頁面內容的父容器，即你想轉換的頁面內容需要全部包含在imageDom節點內。
轉換方法如下：
/**
* 將頁面指定節點內容轉為圖片
* 1.拿到想要轉換為圖片的內容節點DOM；
* 2.轉換，拿到轉換后的canvas
* 3.轉換為圖片
*/
// 生成局部圖片
GenerateImg() {
let element = this.$refs.canvasImgObj;
// console.warn(element);
html2canvas(element[this.slideIndex], { // 我這里是一個swiper，要是一個頁面的話直接element就行
allowTaint: true,
useCORS: true,
tainttest: true, // 檢測每張圖片都已經加載完成
logging: true,
backgroundColor: `rgb(143,40,37)`, // 轉換圖片可能會有白色底色，你可根據你的頁面或者PM要求設置一下背景色，不要的話就null
}).then((canvas) => {
// 轉成圖片，生成圖片地址
let imgUrl = canvas.toDataURL("image/jpeg");
console.warn(imgUrl);
});
}
- 到此你就把H5頁面某個節點區域繪制成圖片了，或許你又會發現繪制的圖片多多少少有些模糊，這里建議把節點區域的涉及到的背景圖片都換成
來渲染。
下載：
// 創建隱藏的可下載鏈接
let eleLink = document.createElement("a");
eleLink.href = imgUrl; // 轉換后的圖片地址
eleLink.download = "pictureName";
// 觸發點擊
document.body.appendChild(eleLink);
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
這里需要注意的是：a標簽的download屬性，雖然可以下載，但是兼容不好，好多不支持。瀏覽器如何不做兼容還是可以用的，比如Chrome。
所以移動端的話建議原生提供接口，除此你可以做個引導，比如在微信里面長按來保存等一系列操作。
最后，在進行 H5 開發時，一旦考慮到微信，就有可能出現一些之前考慮不到的問題和限制，對此，產品經理和程序員都要盡可能地多多了解。知道在微信中，能干什么，不能干什么，降低開發和反復溝通的成本。