图片裁剪插件Jcrop.js的使用

最新推荐文章于 2024-05-09 09:33:27 发布

wy_Blog

最新推荐文章于 2024-05-09 09:33:27 发布

阅读量1.1k

点赞数 2

分类专栏：前端插件

本文链接：https://blog.csdn.net/wy_Blog/article/details/54925634

版权

前端插件专栏收录该内容

9 篇文章 0 订阅

订阅专栏

中文API文档地址：http://code.ciaoca.com/jquery/jcrop/

简单使用裁剪：

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>裁切插件</title>
        <!--一定要引入css-->
    <link rel="stylesheet" href="./Jcrop/css/Jcrop.min.css">
    <style>
        /*.box {
         width: 600px;
         height: 400px;
         background: pink;
         }*/
    </style>
    </head>
    <body>
    <!-- <div class="box"></div> -->
    <div class="box">
    <img src="aa.jpg" alt="">
    </div>
    <script src="../jquery/jquery.js"></script>
        <!-- Windows 是不区分大小写 -->
        <!-- Linux 是区分的 -->
    <script src="./Jcrop/js/Jcrop.min.js"></script>
    <script>
        // 有一个需要
        // 宽度比为 2
        // 任意大小的图片,默认选区水平铺满,垂直居中
    $('img').Jcrop({
        // setSelect: [10, 10, 100, 100]//第一种设置模式，值是死的
        aspectRatio: 2, //宽高比例 
        boxWidth: 400,  //控制盒子宽度
        // bgColor: 'red',
        canResize: false
    }, function () {
        // 当裁切插件执行成功后回调此方法
        console.log('插件执行了...');

        // this 指的是当前插件的实例
        // console.log(this);
        // 此实例上有一些方法可供使用

        // 原始图片宽高
        // this.ui.stage.width
        // this.ui.stage.height
        var w = this.ui.stage.width,
            h = w / 2,
            x = 0,
            y = (this.ui.stage.height - h) / 2;


        console.log(this);

        //开启一个新的选区
        this.newSelection();
        this.setSelect([x, y, w, h]);//第二种设置模式值是可以设置获取的
    });

// 事件监听到父元素
$('.box').on('cropstart cropmove cropend', function(e, s, c) {
    // console.log(e.type);
    console.log(c);
});
</script>
</body>
</html>

截取时带有预览代码：

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>裁切插件</title>
    <link rel="stylesheet" href="./Jcrop/css/Jcrop.min.css">
    <style>
/*.box {
 width: 600px;
 height: 400px;
 background: pink;
 }*/
.jcrop-thumb {
    right: 0;
    top: 0;
}

.thumb {
    width: 300px;
    height: 400px;
    position: absolute;
    top: 0;
    right: 0;
    background: pink;
}
</style>
</head>
<body>
<!-- <div class="box"></div> -->
    <div class="box">
    <img src="bb.jpg" alt="">
    </div>
    <div class="thumb"></div>
    <script src="../jquery/jquery.js"></script>
        <!-- Windows 是不区分大小写 -->
        <!-- Linux 是区分的 -->
    <script src="./Jcrop/js/Jcrop.js"></script>
    <script>
        // 有一个需要
        // 宽度比为 2
        // 任意大小的图片,默认选区水平铺满,垂直居中
    $('img').Jcrop({
        // setSelect: [10, 10, 100, 100]
        // 设置选区的宽高比
        aspectRatio: 2,
        // 设置图片的宽度
        boxWidth: 400,
        // bgColor: 'red',
        // 是否可以调整大小
        // canResize: false
    }, function () {
        // 当裁切插件执行成功后回调此方法
        console.log('插件执行了...');

        // this 指的是当前插件的实例
        // console.log(this);
        // 此实例上有一些方法可供使用

        // 原始图片宽高
        // this.ui.stage.width
        // this.ui.stage.height
        var w = this.ui.stage.width,
            h = w / 2,
            x = 0,
            y = (this.ui.stage.height - h) / 2;

        // 新选区
        this.newSelection();
        // 设置新选区坐标
        this.setSelect([x, y, w, h]);

        this.initComponent('Thumbnailer', {
            width: 240,
            height: 120,

            thumb: '.thumb'
        });
    });

// 事件监听到父元素
$('.box').on('cropstart cropmove cropend', function(e, s, c) {
    // console.log(e.type);
    // 通过c参数可以获取裁切后的尽寸
    console.log(c);
});
</script>
</body>
</html>

wy_Blog

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片裁剪插件Jcrop.js的使用

简单使用裁剪：DOCTYPE html>lang="en"> head> meta charset="UTF-8"> title>裁切插件title> 一定要引入css--> link rel="stylesheet" href="./Jcrop/css/Jcrop.min.css"> style> /*.box {
复制链接

扫一扫

专栏目录