laravel裁剪图片上传，动态存储路径，动态裁剪尺寸

成品图：站在伟人的肩膀 改成了适合自己用的

• 动态存储路径
• 动态裁剪尺寸

html:

<div class=”form-group”>

       <label class=”control-label font-weight-bold”>@lang(‘图片1’)</label>

         <div class=”thumb”>

                <div class=”avatar-preview”>

                     <div class=”profilePicPreview” style=”background-image: url(‘{{getImage(imagePath()[‘product’][‘path’],imagePath()[‘product’][‘size’])}}’)”></div>

                  </div>

                  <div class=”avatar-edit”>

                      <input type=”file” name=”image” class=”profilePicUpload” id=”image” accept=”.png, .jpg, .jpeg” data-id=”1″  data-path=”{{imagePath()[‘product’][‘path’]}}” data-size=”{{imagePath()[‘product’][‘size’]}}”/>

                        <input type=”hidden”  name=”proimage” id=”proimage” value=””>

                         <label for=”image” class=”bg–primary” ><i class=”la la-pencil”></i></label>

                   </div>

          </div>

  </div>

js:

<script src=”{{ asset(‘assets/admin/comp_upload/new/jquery-1.10.2.js’) }}”></script>

<script src=”{{ asset(‘assets/admin/comp_upload/new/cropper.js’) }}”></script>

<link href=”{{ asset(‘assets/admin/comp_upload/new/cropper.css’) }}” rel=”stylesheet”>

<script>

    var imgURL = ”;

    var proportion = [];

    $(“#image”).change(function(event){

        var obj = $(this);

        var id = $(this).data(‘id’);

        var path = $(this).data(‘path’);

        var size = $(this).data(‘size’);

        proportion = size.split(“x”);

        proportion[0] = parseInt(proportion[0]);

        proportion[1] = parseInt(proportion[1]);

        console.log(proportion)

        var files = event.target.files;

        var file;

        if (files && files.length > 0) {

            file = files[0];

            var URL = window.URL || window.webkitURL;

            // 本地图片路径

            imgURL = URL.createObjectURL(file);

            console.log(imgURL);

            Model_Cropper({

                imgUrl: imgURL, // 图片地址 / 或者 base64   注：图片地址(需要在服务器环境下  base64不需要)

                proportion: proportion, // 宽/高  裁剪and压缩比例  单位px  图片等比例压缩至 200px/200px

                confirm: function (result) {   // 裁剪成功后  返回的 事件

                    // 调用 result.close() 关闭弹框

                    // result.data  为对象  base64 = 处理后base64码  blob = 图片对象

                    console.log(result)

                    console.log(‘blob对象=======’,result.data.blob)

                    console.log(‘base64=======’,result.data.base64)

                    // alert(‘打开控制台查看 裁剪压缩返回数据’)

                    var blob = result.data.blob;

                    var src = result.data.base64;

                    //转成file文件对象

                    // var file1 = new File([blob], “aa”+Math.round(Math.random()*100000)+”.png”,{type:”image/png”});

                    // console.log(file1)

                    // //input fileList 无法修改

                    // $(‘#image’)[0].files = file1;

                    //上传

                    var host = “https://{{Request::server(‘HTTP_HOST’)}}”

                    var data = {};

                    data.base64_img = src;

                    data.path = path;

                    $.ajax({

                        headers: {

                            ‘X-CSRF-TOKEN’: “{{ csrf_token() }}”

                        },

                        url: “{{ route(‘uploadBaseImg’) }}”,

                        data: data,

                        type: “POST”,

                        dataType: ‘json’,

                        success: function (res) {

                            console.log(res)

                            if (res.error == ‘ok’) {

                                $(‘#proimage’).val(res.data.image);

                                obj.parent().parent().find(“.profilePicPreview”).css(‘background-image’,’url(‘+host+’/’+path+’/’+res.data.image+’)’)

                                $(“#modail-dialog-box_s”).remove();

                                imgURL = ”;

                                proportion = [];

                            }

                        }

                    });

                },

            })

        }

    });

</script>

php:

 public function uploadBaseImg(Request $request){

        $img = $request[‘base64_img’];

        $path = $request[‘path’];

        // $curl = ‘data:image/jpg/png/gif;base64,’. $img;

        $curl = $img;

        preg_match(‘/^(data:\s*image\/(\w+);base64,)/’,$img,$res);

        if (strstr($curl,”,”)){

            $image = explode(‘,’,$curl);

            $image = $image[1];

        }

        $imageName = date(“Ymd”).rand(1111,9999).’.’.$res[2];

        $filepath = $path. ‘/’;

        if (!file_exists($filepath)) {

            @mkdir($filepath);

        }

        $imageSrc = $path .”/”. $imageName;

        $r = file_put_contents($imageSrc, base64_decode(str_replace($res[1],”,$img)));

        if (!$r) {

            return apijson(‘error’,’上传失败’,”);

        }else{

            // $path = $path.’/’ . date(‘Ymd’) . ‘/’;

            $savepath[‘image’] = $imageName;

             return apijson(‘ok’,’上传成功’,$savepath);

        }

    }

css文件js文件链接：

https://www.jq22.com/demo/jqueryjpgys201906200044/js/cropper.js

https://www.jq22.com/demo/jqueryjpgys201906200044/css/cropper.css