Jquery图片截图工具(默认为图片宽度)

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

一、功能:

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>



©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页