jQuery-photoClip.js 图片裁剪插件-BFW插件库

jQuery-photoClip.js 图片裁剪插件

第一步引入bfwone及依赖项jquery.17|iscroll-zoom|lrz.all.bundle

第二步执行插件代码

 var clipArea = new bjj.PhotoClip("#clipArea", {
                    size: [260, 260],裁剪区域大小
                    outputSize: [640, 640],输出大小
                    file: "#file",//文件选择元素
                    view: "#view", 裁剪区域
                    ok: "#clipBtn", 裁剪按钮
                    loadStart: function() {
                        console.log("照片读取中");
                    },
                    loadComplete: function() {
                        console.log("照片读取完成");
                    },
                    clipFinish: function(dataURL) {
                        console.log(dataURL);
                    }
});

完整示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|iscroll-zoom|lrz.all.bundle&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>

    <script type="text/javascript">
        bready(function() {
            use(["jquery.photoClip"], function() {
                var clipArea = new bjj.PhotoClip("#clipArea", {
                    size: [260, 260],
                    outputSize: [640, 640],
                    file: "#file",
                    view: "#view",
                    ok: "#clipBtn",
                    loadStart: function() {
                        console.log("照片读取中");
                    },
                    loadComplete: function() {
                        console.log("照片读取完成");
                    },
                    clipFinish: function(dataURL) {
                        console.log(dataURL);
                    }
                });

            });
        });
    </script>
    <style>
        body {
            margin: 0;
            text-align: center;
        }
        #clipArea {
            margin: 20px;
            height: 300px;
        }
        #file,
        #clipBtn {
            margin: 20px;
        }
        #view {
            margin: 0 auto;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="clipArea"></div>
    <input type="file" id="file">
    <button id="clipBtn">截取</button>
    <div id="view"></div>
</body>
</html>

jQuery-photoClip.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