Layui+photoclip插件实现图片裁剪功能

Layui 图片上传功能实现后，现在来实现图片裁剪功能，代码还是接着使用图片上传的代码。没有看过的可以移步到 Layui图片上传文章

引入photoclip和Layui的js文件

HTML代码

  <form class="layui-form" onsubmit="return false">
        <div class="layui-row">
            <div class="">
                <div id="clipArea"></div>
                <input id="bas" type="hidden" />
                <input type="file" id="file">
                <div id="view"></div>
                <div class="layui-form-item" style="text-align:center">
                    <button class="layui-btn" id="clipBtn">截取</button>
                    <button class="layui-btn layui-btn-danger" id="BtnSure">确认</button>
                    <button class="layui-btn layui-btn-normal" id="btnClose" style="margin-left:10px;">关闭</button>
                </div>

            </div>

        </div>

js代码

  <script>
        layui.use(['jquery', 'laydate', 'layer', 'table', 'upload', 'form'], function () {
     
            var $ = layui.jquery,
                laydate = layui.laydate,
                layer = layui.layer,
                table = layui.table,
                upload = layui.upload,
                form = layui.form;

            $.ajaxSettings.async = false;
            init();
            function init() {
     

                $("#BtnSure").click(function () {
     
                    var dataurl = $("#bas").val();
                    console.log(dataurl);
                    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

                    while (n--) {
     
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    var obj = new Blob([u8arr], {
      type: mime });

                    //上传数据
                    var fd = new FormData();
                    fd.append("file", obj, "image.png");
                    $.ajax({
     
                        url: "/Test/UploadImg",
                        type: "POST",
                        processData: false,
                        contentType: false,
                        data: fd,
                        success: function (res) {
     
                            var data = JSON.parse(res);
                            //返回图片的路径
                            console.log(data.data[0]);
                            if (data.code == "0") {
     
                                parent.$('#img1').attr('src', data.data[0]);
                                parent.$('#ImgUrl').text(data.data);
                                parent.$(".deleteImg").show();
                                layer.msg("上传成功", {
      icon: 1, time: 2000 });
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            }
                            else
                                layer.msg("上传失败", {
      icon: 2, time: 2000 });

                          }
                    });
                })


                $("#btnClose").click(function () {
     
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                })
                $.ajaxSettings.async = true;
            }
        })
        function DeletePhoto(index) {
     
            $("#PhotoDetail" + index).remove();
        }

        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) {
     
            }
        });
    </script>

里面的UploadImg 方法还是和图片上传的方法一样。