（1）Html2Canvas
說明：這是一個關於截取屏幕作爲圖片的插件
附上我在PC端測試的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html2Canvas截屏</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<!-- bluebird.js - 讓所有瀏覽器都支持 ES6 Promise 對象 -->
<script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta3/html2canvas.js"></script>
<style>
a {
cursor: pointer;
color: rgb(85, 26, 139);
text-decoration: underline;
}
#content{
background: -webkit-linear-gradient(left top, #4bb0ff, #6149f6); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, #4bb0ff, #6149f6); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, #4bb0ff, #6149f6); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, #4bb0ff, #6149f6); /* 標準的語法 */
width: 300px;
height: 300px;
display: flex;
cursor: pointer;
margin: 17% auto;
border-radius: 8px;
align-items: center;
}
h1{
text-align: center;
margin: auto;
color: #6149f6;
}
canvas#mycanvas {
display: flex;
margin: auto;
}
</style>
</head>
<body>
<div id="content"><h1>點我截屏保存圖片</h1></div>
<script>
$("#content").on("click", function (event) {
event.preventDefault();
var userAgent = navigator.userAgent;
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
html2canvas($('#content'), {
allowTaint: true,
taintTest: false,
useCORS: true,//火狐瀏覽器添加項
onrendered: function (canvas) {
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var userAgent = navigator.userAgent;
//判斷是否是IE11
// debugger
if (-1 !== userAgent.indexOf("Trident")) {
var arr = image.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
window.navigator.msSaveBlob(new Blob([u8arr], { type: mime }), "download.png");
} else {
canvas.id = "mycanvas";
//生成base64圖片數據
// var dataUrl = canvas.toDataURL();
var dataUrl = canvas.toDataURL('image/jpeg', 1.0)
var newImg = document.createElement("img");
newImg.src = dataUrl;
var a = $("<a></a>").attr("href", dataUrl).attr("download", new Date().getTime() + ".png");
$("body").append(a);//火狐瀏覽器添加項
a[0].click();
a.remove();
}
document.body.appendChild(canvas)
}
});
});
</script>
</body>
</html>
**
另外一種只截屏不保存圖片
**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html2Canvas截圖</title>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<style>
#content{
width: 500px;
height: 700px;
background: url(timg.jpg) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div id="content">
<input type="button" value="截圖" onclick="takeScreenshot()">
</div>
<script type="text/javascript">
function takeScreenshot() {
html2canvas(document.getElementById('content'), {
taintTest: true,
onrendered: function(canvas) {
document.body.appendChild(canvas)
},
width: document.documentElement.clientWidth || document.body.clientWidth,
height: document.documentElement.clientHeight || document.body.clientHeight
})
}
</script>
</body>
</html>