html2canvas ---- canvas裏的width和style裏面的width區別

時間 2019-11-17

標籤 html2canvas html canvas width style 裏面區別欄目 HTML 简体版

原文原文鏈接

今天想要用html2canvas作一個截圖保存，參考了一個demo：姑且叫作demo1.html javascript

固然前提是要有html2canvas.js jq無關緊要 css

demo.html:html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>html2canvas example</title>
<script type="text/javascript" src="html2canvas.js"></script>
</head>
<script type="text/javascript">
function takeScreenshot() {
//console.log('test');
html2canvas(document.getElementById('view'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
// width: 300,
// height: 300
});
}
</script>
<body>
<div id="view" style="background:url(images/pic1.jpg) 50%; width: 700px; height: 500px;">
<input type="button" value="截圖" onclick="takeScreenshot()">
</div>
</body>
</html>java

而後我就注意到，爲何他把設置裏面的寬高給註釋了呢？爲何dom的style裏面設置了呢？他倆有什麼區別呢？jquery

我又看到了demo2.html：canvas

demo2.html小程序

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body tabindex="1" class="loadingInProgress" id="contbox">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>
<script>
//如下是截圖代碼
$(function(){
$("#btn").click(function(){
html2canvas($("#contbox"), {
height: $("#contbox").outerHeight() + 20,
width: $("#contbox").outerWidth() + 20 ,
onrendered: function(canvas) {
//將canvas畫布放大若干倍，而後盛放在較小的容器內，就顯得不模糊了
var timestamp = Date.parse(new Date());
//把截取到的圖片替換到a標籤的路徑下載
$("#down1").attr('href',canvas.toDataURL());
//下載下來的圖片名字
$("#down1").attr('download',timestamp + '.png') ;
document.body.appendChild(canvas);
}
//能夠帶上寬高截取你所須要的部份內容
});
});
});
</script>
<div class="btn" id="btn">截取屏幕</div>
<div><a id="down1" class="down" href="##" download="downImg" >截圖下載</a></div>
<div>你的網頁內容………………</div>
</body>
</html>app

爲何要用demo2呢，主要是demo1在電腦上跑不起來，很差看！demo2能夠跑起來，而且能看出一些端倪！dom

固然，只是一些端倪，主要的還在咱們的demo3.htmlui

demo3.html

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function drawDiagonal(id){
var canvas=document.getElementById(id);
var context=canvas.getContext("2d");
context.beginPath();
context.moveTo(0,0);
context.lineTo(100,100);
context.stroke();
}

window.onload=function(){
drawDiagonal("diagonal1");
drawDiagonal("diagonal2");
drawDiagonal("diagonal3");
drawDiagonal("diagonal4");
}
</script>
</head>
<body>
<canvas id="diagonal1" style="border:1px solid;" width="100px" height="100px"></canvas>
<canvas id="diagonal2" style="border:1px solid;width:200px;height:200px;" width="100px" height="100px"></canvas>
<canvas id="diagonal3" style="border:1px solid;width:200px;height:200px;"></canvas>
<canvas id="diagonal4"></canvas>
</body>
</html>

效果以下：

到這裏，可能就差很少明白了。首先咱們要知道，咱們在html2canvas()裏面設置寬和高，是設置的畫布的寬和高，而style裏面的寬和高，是canvas本身自己渲染所需的寬和高，也就是畫板的寬和高，這是不同的，通常狀況下，咱們只在style裏面設置，畫布的寬和高就會被默認爲(width:300px，height:150px)，而畫板就變成了咱們設置的大小。

由於canvas就至關因而一個畫板和畫紙，咱們直接設置width和height時，就至關於對畫板和畫紙都進行了設置，而咱們設置style裏面的寬和高時，至關於只對畫板進行了設置，沒有對畫紙設置，仍是默認的300×150。因此爲了避免讓畫板空出一片，咱們就要把畫紙也拉伸到和畫板同樣的寬和高，因而就出現了上述的狀況。

不過個人例子老是畫板比畫布高的，那畫布比畫板高的呢？

實際上是同樣的，且看demo4：

demo4.html

window.onload=function(){
drawDiagonal("diagonal1");
}
</script>
</head>
<body>
<canvas id="diagonal1" style="border:1px solid;width:200px;height:200px;" width="300px" height="300px"></canvas>
</body>
</html>

能夠明顯看出，咱們的畫板大小是200*200 而畫紙大小是300*300 紙也要和畫板同樣大，因此紙相應縮小。因而咱們的斜線處在了200*200的三分之一處！不是100px*100px！

如今，你應該明白了吧？

固然啦，我舉的例子基本上都是成比例的，不成比例的不是不容易觀察嘛！本身感興趣了能夠多多舉一些不成比例的例子，本身觀察，固然我覺着那就有點吹毛求疵啦~~~

今天的內容到此結束，canvas的探索還要繼續，小程序裏面的組件也要明白遠離~

最後，用我dk結個尾~~~