js 截屏保存图片

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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);
}
}