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

2024-04-27 15:13:50

字體：大中小

供稿：網(wǎng)友

中文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 是不區(qū)分大小寫 -->        <!-- linux 是區(qū)分的 -->    <script src="./Jcrop/js/Jcrop.min.js"></script>    <script>        // 有一個需要        // 寬度比為 2        // 任意大小的圖片,默認(rèn)選區(qū)水平鋪滿,垂直居中    $('img').Jcrop({        // setSelect: [10, 10, 100, 100]//第一種設(shè)置模式，值是死的        aspectRatio: 2, //寬高比例         boxWidth: 400,  //控制盒子寬度        // bgColor: 'red',        canResize: false    }, function () {        // 當(dāng)裁切插件執(zhí)行成功后回調(diào)此方法        console.log('插件執(zhí)行了...');        // this 指的是當(dāng)前插件的實例        // 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);        //開啟一個新的選區(qū)        this.newSelection();        this.setSelect([x, y, w, h]);//第二種設(shè)置模式值是可以設(shè)置獲取的    });// 事件監(jiān)聽到父元素$('.box').on('cropstart cropmove cropend', function(e, s, c) {    // console.log(e.type);    console.log(c);});</script></body></html>
截取時帶有預(yù)覽代碼：
<!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 是不區(qū)分大小寫 -->        <!-- Linux 是區(qū)分的 -->    <script src="./Jcrop/js/Jcrop.js"></script>    <script>        // 有一個需要        // 寬度比為 2        // 任意大小的圖片,默認(rèn)選區(qū)水平鋪滿,垂直居中    $('img').Jcrop({        // setSelect: [10, 10, 100, 100]        // 設(shè)置選區(qū)的寬高比        aspectRatio: 2,        // 設(shè)置圖片的寬度        boxWidth: 400,        // bgColor: 'red',        // 是否可以調(diào)整大小        // canResize: false    }, function () {        // 當(dāng)裁切插件執(zhí)行成功后回調(diào)此方法        console.log('插件執(zhí)行了...');        // this 指的是當(dāng)前插件的實例        // 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;        // 新選區(qū)        this.newSelection();        // 設(shè)置新選區(qū)坐標(biāo)        this.setSelect([x, y, w, h]);        this.initComponent('Thumbnailer', {            width: 240,            height: 120,            thumb: '.thumb'        });    });// 事件監(jiān)聽到父元素$('.box').on('cropstart cropmove cropend', function(e, s, c) {    // console.log(e.type);    // 通過c參數(shù)可以獲取裁切后的盡寸    console.log(c);});</script></body></html>