页面截图之html2canvas
- 前端
- 三生万物
- 0
html2canvas官网:http://html2canvas.hertzen.com/
html
<script type="text/javascript" src="https://zhangqh22.gitee.io/libs/jquery.min.js"></script>
<script type="text/javascript" src="https://zhangqh22.gitee.io/libs/vue/vue.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div>
<button type="button" @click="screenshot">截<br>长<br>图</button>
</div>
javascript
var app = new Vue({
el: '#js_app',
methods: {
// 截图
screenshot: function() {
var _this = this;
$('#js_screenshot').hide();
// window.scrollTo(0,0); 指定区域截图防偏移
html2canvas(document.body).then(function(canvas) {
// window.open(URL.createObjectURL(_this.base64ToBlob(canvas.toDataURL())));
var a = document.createElement('a')
var event = new MouseEvent('click')
a.download = Date.now();
a.href = URL.createObjectURL(_this.base64ToBlob(canvas.toDataURL()))
a.dispatchEvent(event)
$('#js_screenshot').show();
});
},
// base64转换
base64ToBlob: function(code) {
var parts = code.split(';base64,');
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
}
});
参数传递
html2canvas(document.body, {
allowTaint: false,
useCORS: true
}).then(function(canvas) {
// ...
})
注意:如果截图内容为空白说明有滚动条,这里可以选择copy一份放在可视区或顶部供截图使用,使用完再删除;也可以通过控制滚动条把截图内容滚动到可视区处理
- Blob 对象表示一个不可变、原始数据的类文件对象
- atob() 方法用于解码使用 base-64 编码的字符串
免责申明:本站发布的内容(图片、视频和文字)以转载和分享为主,文章观点不代表本站立场,如涉及侵权请联系站长邮箱:xbc-online@qq.com进行反馈,一经查实,将立刻删除涉嫌侵权内容。