html2canvas

<!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="./js/html2canvas.js"></script>

<style>

* {

margin: 0;

padding: 0;

}

</head>

 

<body>


 

<div id="capture" style="padding: 10px; background: #f5da55">

<h4 style="color: #000; ">Hello world!</h4>

</div>

<button οnclick="createPicture()" style="width:20px; height:20px;"></button>

 

</body>

 

</html>

<script src="./js/jquery.min.js"></script>

<script type="text/javascript">

// function takeScreenshot() {

// html2canvas(document.querySelector("#capture"), {

// scale: 4

// }).then(canvas => {

// document.body.appendChild(canvas)

// });

// }

var browser = {

versions: function() {

var u = navigator.userAgent,

app = navigator.appVersion;

return {

trident: u.indexOf('Trident') > -1, //IE内核

presto: u.indexOf('Presto') > -1, //opera内核

webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核

mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端

iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器

iPad: u.indexOf('iPad') > -1, //是否iPad

webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部

weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)

qq: u.match(/\sQQ/i) == " qq" //是否QQ

};

}(),

language: (navigator.browserLanguage || navigator.language).toLowerCase()

}

console.log(browser.versions, browser.language);




 

//导出

function createPicture() {

html2canvas(document.getElementById('capture'), {

scale: 2

}).then(function(canvas) {

this.imgmap = canvas.toDataURL()

if (window.navigator.msSaveOrOpenBlob) {

var bstr = atob(this.imgmap.split(',')[1])

var n = bstr.length

var u8arr = new Uint8Array(n)

while (n--) {

u8arr[n] = bstr.charCodeAt(n)

}

var blob = new Blob([u8arr])

window.navigator.msSaveOrOpenBlob(blob, '个人证书' + '.' + 'png')

} else {

// 这里就按照chrome等新版浏览器来处理

const a = document.createElement('a')

a.href = this.imgmap

a.setAttribute('download', 'chart-download')

a.click()

}

 

});

}

</script>

上一篇:javascript – html2canvas,样式不适用于画布?


下一篇:将页面的内容导出使用html2canvas+jsPDF