html2canvas.js 这个js有个强大的功能,就是能将html 对应的dom生成canvas。
这样,我们就可以通过生成的canvas转化成 base64 图片,从而实现截屏功能;
核心代码如下(同时也解决了一个bug,生成的图片不高清):
//以下乘以3是将画布和画布的内容放大3被,从而使生成的图片变清晰
var canvas = document.createElement("canvas");
canvas.height = $(window).height()*3
canvas.width = $(window).width()*3
var context = canvas.getContext("2d");
//然后将画布缩放,将图像放大两倍画到画布上
context.scale(3,3);
html2canvas(document.getElementById('view'), {
canvas: canvas,
onrendered: function(canvas) {
var _h = $(window).height()*2/3;
var _w = $(window).width()*2/3;
_src = canvas.toDataURL('image/png');
var img = new Image();
img.src = _src;
img.onload = function(){
var $wrap = $('#showSreenShot .wrap');
$wrap.height(_h)
$wrap.width(_w)
$wrap.css({
marginTop: -_h*2/3,
marginLeft: -_w/2
})
$('#showSreenShot .wrap').prepend($(img));
$('#showSreenShot').fadeIn(200);
}
}
html2canvas.js 下载地址 https://github.com/niklasvh/html2canvas/tree/master/dist