成品图:站在伟人的肩膀 改成了适合自己用的
- 动态存储路径
- 动态裁剪尺寸
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/200pxconfirm: 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.jshttps://www.jq22.com/demo/jqueryjpgys201906200044/css/cropper.css