前端更新實在快，自己感覺唄甩老遠，經(jīng)理告訴我有一個需求党涕，是屏幕截屏烦感，蒙了，js還能實現(xiàn)這功能膛堤？然后抱著試試的心態(tài)手趣，最后在網(wǎng)上還真找到了這樣的代碼，還有插件 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是網(wǎng)上找的肥荔，其中部分自己進行了一些修改绿渣，讓其更加適合自己，但是最后卻不是我需要的燕耿，這個截屏只能實現(xiàn)屏幕內(nèi)內(nèi)容的截取怯晕，滾動條外部的內(nèi)容沒辦法截取，還在繼續(xù)研究屏幕外的截取
