【求个JS页面截图功能】

程序员一灯 2014-04-06 02:30:22

如题，想在页面里面截图，最好不用第三方JS包。。。
有哪位同志做过？

...全文

155 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

程序员一灯 2014-04-06

打赏
举报

引用 1 楼 huxiweng 的回复:

试试


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JavaScript 截图效果『截取图片局部』</title>
    <style type="text/css">
    #box{
        overflow:hidden;border:1px solid #000;width:100px;
        height:100px;margin:3px;background-color:#0182c4;
        position:absolute;top:1px;left:1px;
    }
    #mainBox {
        padding:3px;border:1px solid #000;
        width:276px;height:110px;
    }
    </style>
   
<script type="text/javascript">
/**
 *
 * 2009-03-04 Topcss
 * QQ:419074376
 * hi.baidu.com/topcss
 *
 */
    function $(id){return document.getElementById(id);}
       
    function change(evt){
        evt = evt || window.event;
       
      xPag = evt.offsetX == undefined ? getOffset(evt).offsetX : evt.offsetX;
        yPag = evt.offsetY == undefined ? getOffset(evt).offsetY : evt.offsetY;
       
        a = $("box").offsetWidth / 2;
        b = $("box").offsetHeight / 2;
       
        $("png").style.marginTop = - (yPag - b) + "px";
        $("png").style.marginLeft = - (xPag - a) + "px";
    }
 
   
//ff
function getOffset(evt)
{
  var target = evt.target;
  if (target.offsetLeft == undefined)
  {
    target = target.parentNode;
  }
  var pageCoord = getPageCoord(target);
  var eventCoord =
  {
    x: window.pageXOffset + evt.clientX,
    y: window.pageYOffset + evt.clientY
  };
  var offset =
  {
    offsetX: eventCoord.x - pageCoord.x,
    offsetY: eventCoord.y - pageCoord.y
  };
  return offset;
}
 
function getPageCoord(element)
{
  var coord = {x: 0, y: 0};
  while (element)
  {
    coord.x += element.offsetLeft;
    coord.y += element.offsetTop;
    element = element.offsetParent;
  }
  return coord;
}
 
 
</script>
</head>
<body>
 
<div id="box">
    <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" id="png"/>
</div>
 
<br /><br /><br /><br /><br /><br />
 
<div id="mainBox" onmousemove="change(event);">
    <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
</div>
<p>把鼠标滑过较大的图片，将出现效果！</p>
 
</body>
</html>

哪里复制来的？你这个是已经有两个图了。。。我的是想要一个类似QQ截图一样的。。。一点。。。就能将页面某一个区域截图的。。。。

teemai 2014-04-06

打赏
举报

试试


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JavaScript 截图效果『截取图片局部』</title>
    <style type="text/css">
    #box{
        overflow:hidden;border:1px solid #000;width:100px;
        height:100px;margin:3px;background-color:#0182c4;
        position:absolute;top:1px;left:1px;
    }
    #mainBox {
        padding:3px;border:1px solid #000;
        width:276px;height:110px;
    }
    </style>
   
<script type="text/javascript">
/**
 *
 * 2009-03-04 Topcss
 * QQ:419074376
 * hi.baidu.com/topcss
 *
 */
    function $(id){return document.getElementById(id);}
       
    function change(evt){
        evt = evt || window.event;
       
      xPag = evt.offsetX == undefined ? getOffset(evt).offsetX : evt.offsetX;
        yPag = evt.offsetY == undefined ? getOffset(evt).offsetY : evt.offsetY;
       
        a = $("box").offsetWidth / 2;
        b = $("box").offsetHeight / 2;
       
        $("png").style.marginTop = - (yPag - b) + "px";
        $("png").style.marginLeft = - (xPag - a) + "px";
    }
 
   
//ff
function getOffset(evt)
{
  var target = evt.target;
  if (target.offsetLeft == undefined)
  {
    target = target.parentNode;
  }
  var pageCoord = getPageCoord(target);
  var eventCoord =
  {
    x: window.pageXOffset + evt.clientX,
    y: window.pageYOffset + evt.clientY
  };
  var offset =
  {
    offsetX: eventCoord.x - pageCoord.x,
    offsetY: eventCoord.y - pageCoord.y
  };
  return offset;
}
 
function getPageCoord(element)
{
  var coord = {x: 0, y: 0};
  while (element)
  {
    coord.x += element.offsetLeft;
    coord.y += element.offsetTop;
    element = element.offsetParent;
  }
  return coord;
}
 
 
</script>
</head>
<body>
 
<div id="box">
    <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" id="png"/>
</div>
 
<br /><br /><br /><br /><br /><br />
 
<div id="mainBox" onmousemove="change(event);">
    <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" />
</div>
<p>把鼠标滑过较大的图片，将出现效果！</p>
 
</body>
</html>