html2canvas html截圖插件

時間 2019-11-08

標籤 html2canvas html canvas 截圖插件欄目 HTML 简体版

原文原文鏈接

如下我總結了一些注意事項，在代碼中註釋了，僅供參考。css

html2canvas.js點擊
付：完整使用的demo ,以下：html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>html2Canvas demo</title>
<script>
document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px';
</script>
<style>
body,
html,
div,
p,
ul,
li,
a,
img,
span,
button,
header,
footer,
section {
padding: 0;
margin: 0;
}web

*, :before, :after {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}canvas

::-webkit-scrollbar {
width: 0;
opacity: 0;
}跨域

button{
font-family: simsun,"microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
body {
font-family: "microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
color: #000;
background-color: #f5f5f5;
-webkit-overflow-scrolling: touch;
}
.share-container {
padding-top: 0.72rem;
width: 2.35rem;
margin: 0 auto;
}app

.share-content {
padding-top: 0.72rem;
height:3rem;
background-color: blue;
border-radius: 5px;
width: 100%;
}
.text{
font-size: 0.36rem;
color: #f2f2f2;
}
.btn-share {
width: 64%;
height: 0.89rem;
background-color: #3baaff;
border-radius: 0.89rem;
border: 1px solid #3baaff;
color: white;
font-size: 0.36rem;
margin: 0.75rem 0 0.67rem;
}
.btn-share:active{
background-color: #1b96c8;
}
</style>
</head>
<body>
<section class="main-container">
<header class="share-container" id="shareContainer">
<div class="share-content" id="shareContent">
<div class="text">
<p>文字，圖片等內容</p>
</div>
</div>
</header>
<footer class="footer-center">
<button class="btn-share" id="btnShare">截 圖</button>
</footer>
</section>dom

//定義查找元素方法
function $(selector) {
return document.querySelector(selector);
}
var main = {
init:function(){
main.setListener();
},
//設置監聽事件
setListener:function(){
var btnShare = document.getElementById("btnShare");
btnShare.onclick = function(){
main.html2Canvas();
}
},
//獲取像素密度
getPixelRatio:function(context){
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
},
//繪製dom 元素，生成截圖canvas
html2Canvas: function () {
var shareContent = $("#shareContent");// 須要繪製的部分的 (原生）dom 對象，注意容器的寬度不要使用百分比，使用固定寬度，避免縮放問題
var width = shareContent.offsetWidth; // 獲取(原生）dom 寬度
var height = shareContent.offsetHeight; // 獲取(原生）dom 高
var offsetTop = shareContent.offsetTop; //元素距離頂部的偏移量spa

var canvas = document.createElement('canvas'); //建立canvas 對象
var context = canvas.getContext('2d');
var scaleBy = main.getPixelRatio(context); //獲取像素密度的方法 (也能夠採用自定義縮放比例)
canvas.width = width * scaleBy; //這裏因爲繪製的dom 爲固定寬度，居中，因此沒有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注意高度問題，因爲頂部有個距離因此要加上頂部的距離，解決圖像高度偏移問題
context.scale(scaleBy, scaleBy);scala

var opts = {
allowTaint:true,//容許加載跨域的圖片
tainttest:true, //檢測每張圖片都已經加載完成
scale:scaleBy, // 添加的scale 參數
canvas:canvas, //自定義 canvas
logging: true, //日誌開關，發佈的時候記得改爲false
width:width, //dom 原始寬度
height:height //dom 原始高度
};
html2canvas(shareContent, opts).then(function (canvas) {
console.log("html2canvas");
var body = document.getElementsByTagName("body");
body[0].appendChild(canvas);
});
}
};

//最後運行代碼
main.init();

</script>
</body>
</html>

運行上面的demo 前有如下注意點：

注意元素的樣式的使用：
外層元素width 不能使用百分比 ,避免致使圖片與文字間縮放比例問題
```
錯誤使用方式如  
 .container { width:50%; margin: 0 auto; } 
```

須要改爲如：

.container { width:300px; margin: 0 auto; }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

html2canvas html截圖插件

運行上面的demo 前有如下 注意點：

運行上面的demo 前有如下注意點：