今天項目中有個需求，需要將頁面的一部分轉為圖片，相當於存證之類的
然后我查閱了下百度，發現了幾種可行的方法，特此來記錄下
1.html2canvas插件
安裝：npm install --save html2canvas
然后在指定的位置引入
使用：
html2canvas(this.$refs.imageDom, {
width: this.$refs.imageDom.clientWidth, //dom 原始寬度
height: this.$refs.imageDom.clientHeight,
allowTaint: true, //允許污染
taintTest: true, //在渲染前測試圖片
// useCORS: true, //開啟跨域配置，但和allowTaint不能共存
}).then(img => {
});
注意點
這個里面一些css樣式是不支持的，然后出現空白啥的就更換css樣式，如果圖片超過一個屏幕的高度，需要加上 window.scroll(0,0)
這個項目是我接手的別人的項目，然后本地運行是沒有問題的，然后上線之后就會出現圖片偏移這個說法，這個項目用的是gulp打包，我至今沒有解決，如果有其他大佬知道的話，麻煩告訴我一下
還有一些頁面加載的時候可能頁面沒加載完成就生成了圖片可以加一個定時器
2.dom-to-image
安裝：npm install dom-to-image
在指定頁面引入
這個使用的時候相當簡單，有幾個常用的api
domtoimage.toPng(...);將節點轉化為png格式的圖片
domtoimage.toJpeg(...);將節點轉化為jpg格式的圖片
domtoimage.toSvg(...);將節點轉化為svg格式的圖片，生成的圖片的格式都是base64格式。
domtoimage.toBlob(...);將節點轉化為二進制格式，這個可以直接將圖片下載，是不是非常方便
domtoimage.toPixelData(...);獲取原始像素值，以Uint8Array 數組的形式返回，每4個數組元素表示一個像素點，即rgba值。這個方法也是挺實用的，可以用於WebGL中編寫着色器顏色。
domtoimage 主要的屬性有：
filter ： 過濾器節點中默寫不需要的節點；
bgcolor ： 圖片背景顏色；
height, width ： 圖片寬高；
style ：傳入節點的樣式，可以是任何有效的樣式；
quality ： 圖片的質量，也就是清晰度；
cacheBust ： 將時間戳加入到圖片的url中，相當於添加新的圖片；
imagePlaceholder ： 圖片生成失敗時，在圖片上面的提示，相當於img標簽的alt；
評價自己
這個的話相對簡單一點沒有出現錯位的圖，我因為那個沒有解決所以就換了一種方法，不是我不解決，我那個看了一天實在是我菜，然后沒解決，沒辦法只能想其他方法，這個辦法相對比較好，通俗易懂