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

最新推荐文章于 2021-09-28 10:31:59 发布

置顶 Suwye_Liu

最新推荐文章于 2021-09-28 10:31:59 发布

阅读量7.7k

点赞数 3

分类专栏： jQuery

本文链接：https://blog.csdn.net/liushuwei0224/article/details/8588263

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

一、功能：

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>

Suwye_Liu

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery图片截图工具（默认为图片宽度）

最近给编辑做了个截图工具一、功能： A：图片自动载入 B：图片载入时，截取工具大小为图片大小 C：所截取图片长宽比例2.5:1二、引用插件：jquery.Jcrop.js三、代码图片处理工具 jQuery(function($){
复制链接

扫一扫