织梦使用cropper.js插件进行图片裁剪并上传

  在 页面中导入 cropper.css 文件和cropper.js文件：

    <link rel="stylesheet" href="templets/cropper/cropper.css">
    <link rel="stylesheet" href="templets/js/bootstrap.min.css">
    <script type="text/javascript" src="templets/cropper/jquery.js"></script>
    <script type="text/javascript" src="templets/cropper/cropper.js"></script>
    <script type="text/javascript" src="templets/cropper/jquery-cropper.js"></script>
    <script type="text/javascript" src="templets/js/bootstrap.min.js"></script>

  因为要用到弹出框，所以也引入了bootstrap。

  剪辑框的样式：

/* 设置主体区域的宽度 */
.layui-card-body {
  width: 500px;
}

/* 设置按钮行的样式 */
.row2 {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 设置裁剪区域的样式 */
.cropper-box {
  width: 350px;
  height: 350px;
  background-color: cyan;
  overflow: hidden;
}

/* 设置第一个预览区域的样式 */
.w100 {
  width: 100px;
  height: 100px;
  background-color: gray;
}

/* 设置第二个预览区域的样式 */
.w50 {
  width: 50px;
  height: 50px;
  background-color: gray;
  margin-top: 50px;
}

/* 设置预览区域下方文本的样式 */
.size {
  font-size: 12px;
  color: gray;
  text-align: center;
}

/* 设置图片行的样式 */
.row1 {
  display: flex;
}

/* 设置 preview-box 区域的的样式 */
.preview-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}

/* 设置 img-preview 区域的样式 */
.img-preview {
  overflow: hidden;
  border-radius: 50%;
}

  HTML代码段：

<-- 放图片的位置 -->
<div class="picture">
    <div id="preview">
        <-- 这个img会显示剪裁后得图片，预览 -->
        <img id="imghead" src="templets/images/chuan.jpg">
    </div>
    <-- 图片的路径将会写入到这个input中 -->
    <input type="hidden" name="litpicpath" class="file" id="litpicpath">
    <-- 这是bootstrap的模态框标识位置 -->
    <input type="button" class="btn btn-primary" data-toggle="modal" data-target="#toux" value="请选择头像">
</div>

<!-- 图片的模态框 -->
<div class="modal fade" id="toux" tabindex="-1" role="dialog" aria-labelledby="touxLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 第一行的图片裁剪和预览区域 -->
            <div class="row1">
                <!-- 图片裁剪区域 -->
                <div class="cropper-box">
                    <!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
                    <img id="imag" src="" />
                </div>
                <!-- 图片的预览区域 -->
                <div class="preview-box">
                <div>
                    <!-- 宽高为 100px 的预览区域 -->
                    <div class="img-preview w100"></div>
                        <p class="size">预览</p>
                    </div>
                    <div>
                        <-- 宽高为 50px 的预览区域 -->
                        <div class="img-preview w50"></div>
                        <p class="size">50 x 50</p>
                    </div>
                </div>
            </div>
            <input type="file" id="file" accept="image/png,image/jpeg" />

            <!-- 进度条 -->
            <div class="progress progress-striped" id="progress" style="display: none">
                <div class="progress-bar progress-bar-success" role="progressbar" id="processBar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:0;">
                    <span class="sr-only">90% 完成（成功）</span>
                </div>
            </div>

            <!-- 第二行的按钮区域 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="tx">确定</button>
            </div>
        </div>
    </div>
</div>

script文件内容：

<script type="text/javascript">
        // 1.1 获取裁剪区域的 DOM 元素
        var $image = $('#imag');
        // 1.2 配置选项
        const options = {
            // 纵横比，宽高比
            aspectRatio: 1,
            dragMode:"move",
            // 指定预览区域
            preview: '.img-preview'
        };

        // 1.3 创建裁剪区域![在这里插入图片描述]
        $image.cropper(options);


        $('#btnChooseImage').on('click', function() {
            $('#file').click()
        });


        // 为文件选择框绑定 change 事件
        $('#file').on('change', function(e) {
            // 获取用户选择的文件
            var filelist = e.target.files;
            if (filelist.length === 0) {
                alert('请选择照片！')
            }

            // 1. 拿到用户选择的文件
            var file = e.target.files[0];
            // 2. 将文件，转化为路径
            var imgURL = URL.createObjectURL(file);
            // 3. 重新初始化裁剪区域
            $('#imag').cropper('destroy') // 销毁旧的裁剪区域
                .attr('src', imgURL) // 重新设置图片路径
                .cropper(options) // 重新初始化裁剪区域
        });
        $('#tx').on('click', function() {
            var dataURL = $image.cropper('getCroppedCanvas').toDataURL("image/png", 0.3);  //使用canvas toDataURL方法把图片转换为base64格式

            var formData = new FormData();
            var file = dataURLtoBlob(dataURL);  //将base64格式图片转换为文件形式
            var newImg = new Date().getMilliseconds() + '.png';   //给图片添加文件名   如果没有文件名会报错
            formData.append('litpic', file, newImg);  //formData对象添加文件
            formData.append('$channelid','20');  //formData对象添加文件
            $("#progress").attr("style","display:block;");//显示进度框

            $.ajax({
                type: "POST",
                url:"./picup.php",
                data: formData,
                processData: false,  // 不处理数据
                contentType: false,  // 不设置内容类型
                xhr:function(){
                    myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ // check if upload property exists
                        myXhr.upload.addEventListener('progress',function(e){
                            var loaded = e.loaded;                  //已经上传大小情况
                            var total = e.total;                      //附件总大小
                            var percent = Math.floor(100*loaded/total)+"%";     //已经上传的百分比
                            console.log("已经上传了："+percent);
                            $("#processBar").css("width",percent);
                        }, false); // for handling the progress of the upload
                    }
                    return myXhr;
                },
                success: function (data) {
                    if(data == 0){
                        alert("头像上传出错,请重新上传！");
                    }else{
                        //隐藏进度框
                        $("#progress").attr("style","display:none;");
                        //图片预览，以base64格式
                        $("#imghead").attr('src',dataURL);
                        //将ajax返回的图片存储路径赋值给input
                        $("#litpicpath").attr('value',data);
                        //关闭模态框
                        $('#toux').modal('hide');
                    }
                }
            });
        });



        //将base64格式图片转换为文件形式
        function dataURLtoBlob(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);
            }
            return new Blob([u8arr], { type: mime });
        }

    </script>

ajax处理上传的图片picup.php:

    //获取上传图片的类型   image/png
    $array1=$_FILES["litpic"]["type"];

    //explode() 函数使用一个字符串分割另一个字符串，并返回由字符串组成的数组。
    $array=explode("/",$array1);

    //图片重命名,如果没有后缀的话可以在最后加上".$array[1]"
    $_FILES["litpic"]["name"]= date("His",time()).$_FILES["litpic"]["name"];

    //图片存储路径
    if (!is_dir("/uploads/picimg/".date('ymd', time())))
    {
        //当路径不存在，创建路径
        mkdir(../uploads/picimg/".date('ymd', time()),0777,true);
    }

    //记录路径
    $idurl="../uploads/picimg/".date('ymd', time())."/";
    //图片的存储路径
    $idurl=$idurl.$_FILES["litpic"]["name"];
    //移动图片
    $idyd=move_uploaded_file($_FILES["litpic"]["tmp_name"],$idurl);
    if($idyd){
        //获取图片在项目中的路径
        $idurl=substr($idurl,2);
        //返回存储路径
        echo $idurl;die;
    }else{
        echo 0;die;
    }

剩下的就是正常的form提交，然后后台正常处理，写入数据库就行了。

 

参考：

1、https://blog.csdn.net/xiaobeimi/article/details/107091808

2、https://blog.csdn.net/ljt123456765/article/details/79716260