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

2024-04-27 15:13:50

字体：大中小

来源：转载

供稿：网友

中文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>