js 截屏

作者: 月光_薛 | 来源:发表于2018-04-25 09:10 被阅读0次

前端更新实在快,自己感觉呗甩老远,经理告诉我有一个需求,是屏幕截屏,蒙了,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是网上找的,其中部分自己进行了一些修改,让其更加适合自己,但是最后却不是我需要的,这个截屏只能实现屏幕内内容的截取,滚动条外部的内容没办法截取,还在继续研究屏幕外的截取

相关文章

  • js 截屏

    前端更新实在快,自己感觉呗甩老远,经理告诉我有一个需求,是屏幕截屏,蒙了,js还能实现这功能?然后抱着试试的心态,...

  • js截屏

    使用Html2canvas截屏 下载Html2canvas Html2canvas加载后将会浏览页面上的所有元素,...

  • android 截屏实现

    Android 截屏分为四种:View 截屏、WebView 截屏、系统截屏 和 adb 截屏 1、View 截屏...

  • Android 截屏方式整理

    Android 实现截屏方式整理 可能的需求: 截自己的屏 截所有的屏 带导航栏截屏 不带导航栏截屏 截屏并编辑选...

  • js截屏(日常需求)

    今天遇到一个需求,就是把分享海报通过微信,完整的分享出去,首先这个分享海报是由两部分组成,一个是海报本身,一个是带...

  • Android surfaceView,TextureView、

    TextureView截屏 surfaceView截屏 root 截图

  • iOS 应用内截屏分享

    需求:捕获用户截屏操作,并建议用户截屏后的操作。虽然iOS11 有系统的截屏,但 APP 内截屏可便捷操作。 封装...

  • (最新)iOS截屏

    ios webview 截屏:ios截屏 前言:介绍一下截屏有很多种做法1:截当前屏幕内容2:截整个视图的所有内容...

  • 读袁靖老师关于长城保护的政协提案有感(修订版)

    截屏图片一: 截屏图片二: 截屏图片三: 截屏图片四: 正文: 当看到袁靖老师这一政协提案时,第一印象,这...

  • 如何成为一名有货的新媒体运营者

    图片制作 Snagit:支持滚动截屏 Faststone Capture:滚动截屏、自定义截屏、录制视频制作GIF...

网友评论

      本文标题:js 截屏

      本文链接:https://www.haomeiwen.com/subject/pcrelftx.html