如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
效果图:
jQuery.cropper 是一款使用简单且功能强大的图片剪裁 jQuery 插件。该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持 canvas,并且支持跨浏览器使用。
官网:https://fengyuanchen.github.io/cropperjs/
cropper 免费 CDN
1 2 |
https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js |
cropper.js 配置参数
名称 | 类型及默认值 | 说明 |
strict | 类型:Boolean,默认值true。 | 在strict模式中,canvas不能小于容器,剪裁容器不能再canvas之外。 |
responsive | 类型:Boolean,默认值true。 | 是否在窗口尺寸改变的时候重置cropper。 |
checkImageOrigin | 类型:Boolean,默认值true。 | 默认情况下,插件会检测图片的源,如果是跨域图片,图片元素会被添加crossOrigin class,并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载,以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳,及图片的重新加载。 |
background | 类型:Boolean,默认值true。 | 是否在容器上显示网格背景。 |
modal | 类型:Boolean,默认值true。 | 是否在剪裁框上显示黑色的模态窗口。 |
guides | 类型:Boolean,默认值true。 | 是否在剪裁框上显示虚线。 |
highlight | 类型:Boolean,默认值true。 | 是否在剪裁框上显示白色的模态窗口。 |
autoCrop | 类型:Boolean,默认值true。 | 是否在初始化时允许自动剪裁图片。 |
autoCropArea | 类型:Number,默认值0.8(图片的80%) | 0-1之间的数值,定义自动剪裁区域的大小。 |
dragCrop | 类型:Boolean,默认值true。 | 是否允许移除当前的剪裁框,并通过拖动来新建一个剪裁框区域。 |
movable | 类型:Boolean,默认值true。 | 是否允许移动剪裁框。 |
resizable | 类型:Boolean,默认值true。 | 是否允许改变剪裁框的大小。 |
zoomable | 类型:Boolean,默认值true。 | 是否允许放大缩小图片。 |
mouseWheelZoom | 类型:Boolean,默认值true。 | 是否允许通过鼠标滚轮来缩放图片。 |
touchDragZoom | 类型:Boolean,默认值true。 | 是否允许通过触摸移动来缩放图片。 |
rotatable | 类型:Boolean,默认值true。 | 是否允许旋转图片。 |
minContainerWidth | 类型:Number,默认值200。 | 容器的最小宽度。 |
minContainerHeight | 类型:Number,默认值100。 | 容器的最小高度。 |
minCanvasWidth | 类型:Number,默认值0。 | canvas 的最小宽度(image wrapper)。 |
minCanvasHeight | 类型:Number,默认值0。 | canvas 的最小高度(image wrapper)。 |
build | 类型:Function,默认值null。 | build.cropper事件的简写方式。 |
built | 类型:Function,默认值null。 | built.cropper事件的简写方式。 |
dragstart | 类型:Function,默认值null。 | dragstart.cropper事件的简写方式。 |
dragmove | 类型:Function,默认值null。 | dragmove.cropper事件的简写方式。 |
dragend | 类型:Function,默认值null。 | dragend.cropper事件的简写方式。 |
zoomin | 类型:Function,默认值null。 | zoomin.cropper事件的简写方式。 |
zoomout | 类型:Function,默认值null。 | zoomout.cropper事件的简写方式。 |
最终实现代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 |
<html> <link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .row{ margin-bottom: 5px; } #photo { max-width: 100%; } .img-preview { width: 100px; height: 100px; overflow: hidden; } button { margin-top:10px; } #result { width: 150px; height: 150px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <label for="input" class="btn btn-danger" id=""> <span>选择图片</span> <input type="file" id="input" class="sr-only"> </label> </div> </div> <div class="row"> <div class="col-sm-6 col-sm-offset-2"> <img src="" id="photo"> </div> <div class="col-sm-2"> <div> <p> 预览(100*100): </p> <div class="img-preview"> </div> </div> <button class="btn btn-primary" onclick="crop()">裁剪图片</button> <div> <br/> <img src="" alt="裁剪结果" id="base64"> </div> </div> </div> </div> <script> var initCropper = function (img, input){ var $image = img; var options = { viewMode: 2, autoCropArea: 0.8, // 定义自动剪裁区域的大小 background:true, // 是否在容器上显示网格背景。 zoomable: false, // 是否允许放大缩小图片 minContainerHeight: 400, minContainerWidth: 400, preview: '.img-preview' // 预览图的class名 }; $image.cropper(options); var $inputImage = input; var uploadedImageURL; if (URL) { // 给input添加监听 $inputImage.change(function () { var files = this.files; var file; if (!$image.data('cropper')) { return; } if (files && files.length) { file = files[0]; // 判断是否是图像文件 if (/^image\/\w+$/.test(file.type)) { // 如果URL已存在就先释放 if (uploadedImageURL) { URL.revokeObjectURL(uploadedImageURL); } uploadedImageURL = URL.createObjectURL(file); // 销毁cropper后更改src属性再重新创建cropper $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options); $inputImage.val(''); } else { window.alert('请选择一个图像文件!'); } } }); } else { $inputImage.prop('disabled', true).addClass('disabled'); } } var crop = function(){ var s = $('#photo').cropper('getCroppedCanvas'); var $image = $('#photo'); var base64url= s.toDataURL('image/jpeg'); //生成base64图片的格式 s.toBlob(function(blob){ //生成Blob的图片格式 console.log(URL.createObjectURL(blob)); $.ajax({ type: 'POST', url: "./4.php" , cache:false, dataType:'json', data: {submit:1,base64:base64url} , success: function(msg){ if(msg=='1'){ alert('操作成功!'); }else{ alert('操作失败!'); } } }); // 裁剪后将图片放到指定标签 $('#result').attr('src', URL.createObjectURL(blob)); }); $('#base64').attr('src', base64url); console.log(base64url); } $(function(){ initCropper($('#photo'),$('#input')); }); </script> </html> <?php if(@$_POST['submit']){ preg_match('/^(data:\s*image\/(\w+);base64,)/', @$_POST['base64'], $result); // data:image/jpeg;base64, 替换成空 $base64=str_replace($result[1], '', str_replace('#','+',@$_POST['base64'])); // in_array() 函数搜索数组中是否存在指定的值。strtolower:把字符转换为小写 if(in_array(strtolower($result[2]),array('jpg','png','gif','jpeg'))){ $new_file = time().rand(1000,9999).".".$result[2]; }else{ $new_file = time().rand(1000,9999).".jpg"; } // 创建一块画布,并从字符串中的图像流新建一副图像 $im = imagecreatefromstring(base64_decode($base64)); if ($im === false) { echo 2;die; } // file_exists() 检查文件或目录是否存在。 if (!file_exists("images/".date('Ymd')."/")){ // 创建目录。若成功,则返回 true,否则返回 false。 mkdir("images/".date('Ymd')."/",0777,true); } // 解码 写入文件中 $re=file_put_contents("images/".date('Ymd')."/".$new_file, base64_decode($base64)); if($re){ echo 1;die; }else{ echo 2;die; } } ?> |