croppie.js 图片裁剪插件-BFW插件库

croppie.js 图片裁剪插件

第一步引入bfwone

第二步执行插件代码

示例如下，可在线编辑运行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var basic;
        bready(function() {
            use(["croppie", "croppie"], function() {
                basic = $('#demo-basic').croppie({
                    viewport: {
                        width: 150,
                        height: 200
                    }
                });
                basic.croppie('bind', {
                    // url: 'demo/cat.jpg',
                    points: [77, 469, 280, 739]
                });
                //on button click

                //  $('#demo-basic').on('update.croppie', //function(ev, cropData) {
                //  $("#result").html(cropData);
                // });
            });
        });
        function crop() {
            basic.croppie('result', 'html').then(function(html) {
                $("#result").html(html);

                // html is div (overflow hidden)
                // with img positioned inside.
            });
        }
    </script>
</head>
<body>

    <!-- or even simpler -->
    <img id="demo-basic" src="http://editor.bfw.wiki/bfwrepo/image/sample4.png" />
    <button onclick="crop();">裁剪</button>
    <div id="result" style="height:200px;">
        132
    </div>

</body>
</html>

croppie.js 图片裁剪插件

网友评论0

jquery.qrcode.min.js

cropper.js

pix.0.8.5.min.js

compressphoto.js

jquery.photoClip.js

croppie.js

Jcrop.js

jquery.jqzoom.js

elastislide.js

smoothproducts.js