1 簡介
html2canvas屏幕截圖基于 DOM，因此可能不是 100% 準確到真實表示，因為它不會制作實際的屏幕截圖，而是根據頁面上可用的信息構建屏幕截圖。
附件：html2canvas.rar
官網地址
2 安裝
2.1 es6 模塊化引入方式，項目中使用
npm install --save html2canvas// 或yarn add html2canvas123
2.2 js直引方式
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>1
3 使用
基礎語法
html2canvas(element, options);1
import html2canvas from 'html2canvas';html2canvas(document.body,{}).then(function(canvas) {
var imgUrl = canvas.toDataURL();
//imgUrl即為圖片的base64形式});1234564 屬性
| 屬性名 | 默認值 | 描述 |
|---|
| allowTaint | false | 是否允許跨域圖像。會污染畫布，導致無法使用canvas.toDataURL 方法 |
| backgroundColor | #ffffff | 畫布背景色（如果未在DOM中指定）。設置null為透明 |
| canvas | null | 現有canvas元素用作繪圖的基礎 |
| foreignObjectRendering | false | 如果瀏覽器支持，是否使用ForeignObject渲染 |
| imageTimeout | 15000 | 加載圖像的超時時間（以毫秒為單位）。設置0為禁用超時。 |
| ignoreElements | (element) => false | 謂詞功能，可從渲染中刪除匹配的元素。 |
| logging | true | 啟用日志以進行調試 |
| onclone | null | 克隆文檔以進行渲染時調用的回調函數可用于修改將要渲染的內容，而不會影響原始源文檔。 |
| proxy | null | 代理將用于加載跨域圖像的網址。如果保留為空，則不會加載跨域圖像。 |
| removeContainer | true | 是否清除html2canvas臨時創建的克隆DOM元素 |
| scale | window.devicePixelRatio | 用于渲染的比例。默認為瀏覽器設備像素比率。 |
| useCORS | false | 是否嘗試使用CORS從服務器加載圖像 |
| width | Element width | canvas的寬度 |
| height | Element height | canvas的高度 |
| x | Element x-offset | 裁剪畫布X坐標 |
| y | Element y-offset | 裁剪畫布y坐標 |
| scrollX | Element scrollX | 渲染元素時要使用的x滾動位置（例如，如果Element使用position: fixed） |
| scrollY | Element scrollY | 呈現元素時要使用的y-scroll位置（例如，如果Element使用position: fixed） |
| windowWidth | Window.innerWidth | 渲染時使用的窗口寬度Element，這可能會影響媒體查詢之類的內容 |
| windowHeight | Window.innerHeight | 渲染時要使用的窗口高度Element，這可能會影響媒體查詢之類的內容 |
解決圖片清晰度問題
| 屬性 | 默認值 | 描述 |
|---|
| scale | window.devicePixelRatio | 用于渲染的比例尺。默認為瀏覽器設備像素比率。 |
每個設備的window.devicePixelRatio的值不盡一樣，想清晰就調高，想壓縮大小就調低。但調的越高，圖片的生成時間就越長。
html2canvas(document.body,{ scale:1.3 }).then(function(canvas) {
var imgUrl = canvas.toDataURL();
//imgUrl即為圖片的base64形式});
該文章在 2023/8/4 18:50:38 編輯過
400 186 1886
