|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
使用html2canvas網頁截圖并調整canvas大小
作者:admin 時間:2021-8-1 20:29:8 瀏覽:有人提到，使用html2canvas網頁截圖時，希望把canvas的大小進行調整，以更適合內容的填充。這其實可以通過JavaScript來實現，并且實現起來并不復雜。
使用html2canvas截圖并調整canvas大小
從本案例看到，canvas的大小區(qū)域發(fā)生了變化，而這一變化是可以通過JavaScript程序來實現的。
完整HTML代碼
<HTML>
<HEAD>
<TITLE>截圖并調整canvas大小</TITLE>
<link href="assets/css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="node_modules/html2canvas.min.js"></script>
<style type="text/css">
body {margin:30px;}
</style>
</HEAD>
<body>
<button onclick="screenshot()">點擊截圖</button>
<div id='input'>
<h2>這是一個測試</h2>
<h3>Hello World</h3> <br>
Base64 output:
<input name="screenshot" type='text' id='screenshot_input' /><br><br>
</div>
<div id="output">
<canvas id=c width=100 height=100 style="border:1px solid #000;"></canvas>
</div>
</body>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
function screenshot() {
html2canvas(document.getElementById('input'), {
background: '#fff'
}).then(function(h2c) {
var base64URL = h2c.toDataURL('image/png').replace('image/png', 'image/octet-stream');
document.getElementById('screenshot_input').value = base64URL;
console.log(base64URL);
canvas.width = h2c.width/5
canvas.height = h2c.height
ctx.drawImage(h2c, 0, 0, h2c.width, h2c.height);
});
}
</script>
</HTML>
上述代碼，關鍵的3行代碼為：
canvas.width = h2c.width/5
canvas.height = h2c.height
ctx.drawImage(h2c, 0, 0, h2c.width, h2c.height);
h2c是html2canvas對象實例，canvas.width是定義canvas的寬度，canvas.height時定義canvas的高度；另外，h2c.width是網頁截圖寬度，h2c.height 是網頁截圖高度。大家可以試試更改這幾個參數值，看看截圖效果。
此外，drawImage 是調用的截圖方法。
您可能對以下文章也感興趣
標簽: html2canvas
相關文章
x
- 站長推薦
