Javascript实现截图功能(代码)--转载

好久没来这里了，迷糊了一段时间，为了尽快热手，自己做了一个截图的js，首先是参看了一个博友的文章，心想也许自己可以用更少的代码来实现，于是变有了这个小玩意的诞生。

我其实比较忠实于原味的js，只是用到ajax的时候会选择mootools的xhr包，辛苦的操作dom这么久了觉得也是时候启用便捷的框架提 高效率了，前段时间经同事介绍认识了jquery，一见如故，done！这个截图的效果里有两个拖拽，jquery的插件狠多，但我为了练手便决定弃用插 件！拖拽自己实现吧！

　　设计过程中充分考虑了最近流行的面对对象和代码分离，页面上只需写上这么几句便可使用这个截图了。

<script language="javascript">
$(document).ready(function (){
    var imgCut1=new ImgCut("showHere","/mydog.jpg",150,200,100,100);
}
</script>
<div id="showHere"></div>

　　传入参数为：ImgCut（在何处创建对象，原始图片的地址，截取的宽度，截取的高度，截取框距外框左右边距，截取框距外框上下边距）。有点罗嗦，主要是为了增强适应性。

　　可以通过实例对象的这些属性和方法获取图像参数信息：

截图尺寸:CutW，CutH

截图位置（相对于原始图左上角）:GetCutLeft()，GetCutTop()

原始图当前尺寸:GetImgWidth()，GetImgHeight()

　　当然别忘了在head里引入文件。

<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="yuImgCut.js" type="text/javascript"></script>
<link href="yuImgCut.css" rel="stylesheet" type="text/css" />

　　在ImgCut的内部首先设计一个构造函数。

function ImgCut(containerName,imgSrc,cutW,cutH,dCutLeft,dCutTop){
    this.ContainerName=containerName;
    this.ImgSrc=imgSrc;
    this.CutW=cutW;
    this.CutH=cutH;
    this.DCutLeft=dCutLeft;
    this.DCutTop=dCutTop;
    this.Fill();
}

　　参数的意义前面已经介绍过了，这些参数都设置了默认值。

ImgCut.prototype={
    ContainerName:"",//在何处创建对象
    ImgSrc:"",//原始图片的地址
    CutW:150,//截取的宽度
    CutH:200,//截取的高度
    DCutLeft:100,//截取框距外框左右边距
    DCutTop:100,//截取框距外框上下边距
    Fill:function(){}



}

　　这里的Fill()的用意在于填充html和注册事件。填充html实在简单，填充完成后效果如下。

<div class="imgCut1">
    <div class="imgCut11">
      <img class="imgCut111" src="/mydog.jpg">
      <table class="imgCut112" border="0" cellpadding="0" cellspacing="0">
          <tr><td/><td/><td/></tr><tr><td/><td class="main"/><td/></tr><tr><td/><td/><td/></tr>
      </table>
    </div>
    <div class="imgCut12">
      <div class="imgCut121"></div>
      <div class="imgCut122">
        <div class="imgCut1221"></div>
      </div>
      <div class="imgCut123"></div>
    </div>
</div>

　　这里的css都设置了默认的高宽。

.imgCut1{width:352px;height:422px;}
.imgCut11{width:350px;height:400px;position:relative;overflow:hidden; border:1px solid #999999;margin:0px auto}
.imgCut111{position:absolute;top:0px;left:0px;border:0px}
.imgCut112{position:absolute;top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;cursor:pointer}
.imgCut112 td{background-color:#cccccc; width:100px; height:100px}
.imgCut112 td.main{width:150px; height:200px;border:1px solid #ffffff;background-color:transparent}
.imgCut12{width:249px;margin:0px auto}
.imgCut121{float:left;border:0px;background:url(Minc.gif) no-repeat;width:19px;height:19px}
.imgCut122{float:left; background:url(track.gif) no-repeat center; height:20px;width:211px; position:relative}
.imgCut1221{position:absolute;top:3px;left:100px;background:url(grip.gif) no-repeat;width:11px;height:16px}
.imgCut123{float:left;border:0px;background:url(Maxc.gif) no-repeat;width:19px;height:19px}

　　为了实现截图的样式效果，一些人的做法是用两张图片，截取框内一张，外面的大框里再一张，把溢出的隐藏，再把大框里的图片调暗点，随便拖动其中
一张的时候也同时移动另一张，我在测试这种做法的时候发现容易使得两张图片移动时有点点的不同步，而且用吝啬的眼光来看的话也有点浪费浏览器的运算资源，
所以我设计了一个只用一张图片加一个table来实现同样的效果，table在web2.0里不是不能用，而是要用得当。将table浮动在图片上方，这
样就不好拖拽图片了，于是我设计将拖拽分成两个层，触发层和移动层，table担当触发层，为了增强通用性和减少代码量，便又设计触发层和移动层在某些时
候也可以成为一体，这样一来，收缩图片的滚动条的功能也同时完成了。具体代码如下。

Drag:function(touchScreenName,dragName,rangeName,track,onDragFunction){
        //鼠标是否被按下
        var isMouseDown=false;
        //鼠标上次移动的X坐标
        var cX=0;
        //鼠标上次移动的Y坐标
        var cY=0;
        //触摸屏是否与拖拽对象分离
        var jObjImgGrag=dragName && $(dragName) || $(touchScreenName);
        //是否限制活动范围
        var rangeX=[];
        var rangeY=[];
        if(rangeName){
            rangeX=[0,$(rangeName).get(0).offsetWidth-jObjImgGrag.get(0).offsetWidth];
            rangeY=[0,$(rangeName).get(0).offsetHeight-jObjImgGrag.get(0).offsetHeight];
        }
        $(touchScreenName).mousedown(function(){isMouseDown=true;$(this).css("cursor","move");cX=0;cY=0;});
        $(document).mouseup(function(){isMouseDown=false;$(touchScreenName).css("cursor","pointer");}).mousemove(function(e){
             //这句很重要,使得拖拽更流畅
             try {document.selection && document.selection.empty && (document.selection.empty(), 1) || window.getSelection && window.getSelection().removeAllRanges();}             catch(exp){}
             if(!isMouseDown)
                 return;
             if(cX==0 && cY==0){
                 cX=e.clientX;
                 cY=e.clientY;
             }
             if(track){
                 if(track=="h") cY=e.clientY;
                 if(track=="v") cX=e.clientX;
             }
             var newLeft=parseInt(jObjImgGrag.css("left").replace("px",""))+e.clientX-cX;
             var newTop=parseInt(jObjImgGrag.css("top").replace("px",""))+e.clientY-cY;
             if(rangeName){
                 newLeft=newLeft<rangeX[0] ? 0 : newLeft;
                 newLeft=newLeft>rangeX[1] ? rangeX[1] : newLeft;
                 newTop=newTop<rangeY[0] ? 0 : newTop;
                 newTop=newTop>rangeY[1] ? rangeY[1] : newTop;
             }
             //开始拖拽
             jObjImgGrag.css({left:newLeft,top:newTop});
             //拖拽时触发的函数
             onDragFunction && onDragFunction({left:newLeft,top:newTop});
             cX=e.clientX;
             cY=e.clientY;
        });
    }

　　在Fill()中调用这个方法。

this.Drag("#"+this.ContainerName+" .imgCut112","#"+this.ContainerName+" .imgCut111");
        var jImgCut111=$("#"+this.ContainerName+" .imgCut111");
        var w=jImgCut111.get(0).offsetWidth;
        var h=jImgCut111.get(0).offsetHeight;
        var zoom=function(e){
            var neww=parseInt(w/100*e.left);
            var newh=parseInt(neww/w*h);
            jImgCut111.css({width:neww,height:newh});
        };
        this.Drag("#"+this.ContainerName+" .imgCut1221","#"+this.ContainerName+" .imgCut1221","#"+this.ContainerName+" .imgCut122","h",zoom);
        var jImgCut1221=$("#"+this.ContainerName+" .imgCut1221");
        $("#"+this.ContainerName+" .imgCut123").click(function(){var l=parseInt(jImgCut1221.css("left").replace("px",""))+1;l=l>200?200:l;jImgCut1221.css("left",l);zoom({left:l});});
        $("#"+this.ContainerName+" .imgCut121").click(function(){var l=parseInt(jImgCut1221.css("left").replace("px",""))-1;l=l<0?0:l;jImgCut1221.css("left",l);zoom({left:l});});

　　通过服务器端程序截图的时候，我们需要给他们一些截图定位的参数。

GetCutLeft:function(){
        return this.DCutLeft-parseInt($("#"+this.ContainerName+" .imgCut111").css("left").replace("px",""));
    },//相对于原始图左边的位置
    GetCutTop:function(){
        return this.DCutTop-parseInt($("#"+this.ContainerName+" .imgCut111").css("top").replace("px",""));
    },//相对于原始图顶边的位置
    GetImgWidth:function(){
        return $("#"+this.ContainerName+" .imgCut111").get(0).offsetWidth;
    },//原始图当前的宽度
    GetImgHeight:function(){
        return $("#"+this.ContainerName+" .imgCut111").get(0).offsetHeight;
    }//原始图当前的高度

　　至此，整个功能就完成了。最后奉上完整的代码，ImgCut，Enjoy！

时间： 2024-10-13 10:02:05

Javascript实现截图功能(代码)--转载的相关文章

手机开发必备技巧：javascript及CSS功能代码分享

1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: 代码如下: width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素)height -            //  viewport 的高度 (

javascript粘贴截图功能

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>利用 clipboardData 在网页中实现截屏粘贴的功能</title> <style type="text/css"> #box{ width:200px; height:200px; border:1px sol

通过javascript库JQuery实现页面跳转功能代码

通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum").val();//#gotopagenum是文本框的id属性 location.href = "NewList.aspx?pagenum="+pn;//location.href实现客户端页面的跳转 }); 实例2: 实现跳转:window.location = 'user!add.

javascript实现map的功能（转载）

/* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素(key, value) * remove(key) 删除指定KEY的元素,成功返回True,失败返回False * get(key) 获取指定KEY的元素值VALUE,失败返回NULL * element(index) 获取指定索引的元素(使用element.key,

Qt5.10实现QQ截图工具功能代码源码分析

为了做出一个QQ截图功能的模块,参考了网上某位网友的代码.这里我们分析一下主要代码.源码已经过测试运行,不懂的留言即可.源码地址:Qtjietu20191216.zip1.首先我们一定会想到要对鼠标事件进行改写,包括点击,移动,释放,双击取消选区等功能. ```//重写基类方法 void keyPressEvent(QKeyEvent *event); void paintEvent(QPaintEvent *event); void mousePressEvent(QMouseEvent *e

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家. 什么是JSONP协议? JSONP即JSON w

HTML5 CSS3 诱人的实例 ：模仿优酷视频截图功能

一般的视频网站对于用户上传的视频,在用户上传完成后,可以对播放的视频进行截图,然后作为视频的展示图.项目中也可以引入这样的功能给用户一种不错的体验,而不是让用户额外上传一张展示图. 效果图: 看起来还是很不错,下面我给大家分析下,极其核心代码很简单: _canvas = document.createElement("canvas"); _ctx = _canvas.getContext("2d"); _ctx.fillStyle = '#ffffff'; _ctx

JavaScript实现计算器功能

截图 : cal.js Js代码   var Class = {} ; Class.calculation = function(){ var calculation = {} ; calculation.result = 0 ; calculation.calculate = function(num1,num2){} ; calculation.getResult = function(){ return this.result ; } ; return calculation ; } ;

【独立开发者er Cocos2d-x实战 006】使用Cocos2dx 实现截图功能

今天台风"灿鸿"来袭,博主默默在家码代码.废话不多说,今天我们要讲的就是截图. Cocos2dx把不同版本实现截图方式不同,我用的是Cocos2dx3.4版本.如果你的版本是Cocos2dx3.2以后的,都是可以用这个方式的,如果是Cocos2dx3.2以前,请参考: 比较Cocos2d-x v2.x与v3.x的截图功能 Cocos2d-x3.1及3.2实现截屏功能 cocos2dx之保存截屏图片 开门见山,直接上代码: const std::string strPath = &quo