前端更新实在快，自己感觉呗甩老远，经理告诉我有一个需求，是屏幕截屏，蒙了，js还能实现这功能？然后抱着试试的心态，最后在网上还真找到了这样的代码，还有插件 html2canvas.js
js代码：
<script>
$('.ss').click(function(){
var html = $('.tuCon')[0].innerHTML;
convertHtml2Canvas()
})
function convertHtml2Canvas() {
html2canvas(document.body, {
allowTaint: false,
taintTest: true
}).then(function(canvas) {
var img = convertCanvasToImage(canvas);
// console.log(img)
document.body.appendChild(img);
img.onload = function() {
img.onload = null;
//获取bookshelf宽度 高度
var bsWidth=20;
var bsHeight=$('.tuConBox').height() +20;
//画布的起始点
var startY=$('.tuConBox').offset().top -10;
var startX=$('.tuConBox').offset().left -10 ;
$('.bookshelf').each(function(i,n){
bsWidth+=$(n).outerWidth(true);
})
canvas = convertImageToCanvas(img, startX, startY, bsWidth, bsHeight);
img.src = convertCanvasToImage(canvas).src;
$(img).css({
display: 'block',
position: 'absolute',
top: 0,
left: 400 + 'px'
});
}
}).catch(function(e) {
console.error('error', e);
});
}
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png", 0.1);
return image;
}
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image, startX, startY, width, height) {
console.log(startX)
console.log(startY)
console.log(width)
console.log(height)
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, width, height);
return canvas;
}
</script>
这段js是网上找的，其中部分自己进行了一些修改，让其更加适合自己，但是最后却不是我需要的，这个截屏只能实现屏幕内内容的截取，滚动条外部的内容没办法截取，还在继续研究屏幕外的截取
