Jquery图片截图工具（默认为图片宽度）

webcode

浏览: 6111938 次
性别:
来自: 上海

最近访客更多访客>>

ap950

u012363178

wangyy

ybfjavaeye

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7533)

社区版块

存档分类

2013-02 ( 78)
2013-01 ( 83)
2012-12 ( 121)
更多存档...

最近给编辑做了个截图工具

一、功能：

A：图片自动载入

B：图片载入时，截取工具大小为图片大小

C：所截取图片长宽比例2.5:1

二、引用插件：jquery.Jcrop.js

三、代码

  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
    <title>图片处理工具</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.Jcrop.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.imgareaselect-width.js"></script>
    <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
    <link rel="stylesheet" href="css/demos.css" type="text/css" />
    <script type="text/javascript">
        jQuery(function($){
        var jcrop_api, boundx, boundy;
        imgReady('img/1.jpg', function (){
            $('#target').Jcrop({
            onChange: updatePreview,
            onSelect: updatePreview,
            onRelease:  clearCoords,
            aspectRatio: 2.5,
            setSelect: [ 0, 0, this.width, this.height/2.5 ]
            },function(){
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                jcrop_api = this;
            });
        });
        function updatePreview(c){
            $('#x1').val(c.x);
            $('#y1').val(c.y);
            $('#x2').val(c.x2);
            $('#y2').val(c.y2);
            $('#w').val(c.w);
            $('#h').val(c.h);
            if (parseInt(c.w) > 0){
                var rx = 400 / c.w;
                var ry = 160 / c.h;
                $('#preview').css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
            }
        };
    });
    function clearCoords(){
      $('#coords input').val('');
    };
    </script>
  </head>

分享到：