PhotoCrop

功能描述

本插件是一个图像剪裁插件,可用于对图片进行旋转缩放剪裁功能,可自定义图片大小。

快速使用

1.引入JS文件

<script type="text/javascript" src="script/hammer.js" ></script>
<script type="text/javascript" src="script/bundle.js" ></script>
<script type="text/javascript" src="script/scrollzoom.js" ></script>
<script type="text/javascript" src="script/photocrop.js" ></script>

2.初始化插件

示例代码

    //初始化插件
    var clipArea = new PhotoClip("#clipArea", {
                size : [300, 300], //裁剪框的大小
                outputSize : [0, 0], //打开图片大小，[0,0]表示原图大小
                file : "#file",//文件ID
                ok : "#clipBtn",//点击完成剪裁ID
                loadStart : function() {//图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
                    $api.removeCls($api.dom(".loading"), "displaynone");
                },
                loadComplete : function() {//图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。
                    $api.addCls($api.dom(".loading"), "displaynone");
                },
                done : function(dataURL) {//裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。
                    console.log(dataURL);
                    $api.css($api.dom("#headimg"), "background-image:url(" + dataURL + ")");
                    //dataURL裁剪后图片地址base64格式提交给后台处理,可通过ajax上传到服务器保存
                    $(".clipbg").fadeOut();
                }
            });

特别说明

,示例只提供了部分代码,详细用法见index.html

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24