欢迎光临
感谢一路有你

实例 | 使用PHP+Cropperjs对图片进行裁剪并保存

效果图:

jQuery.cropper 是一款使用简单且功能强大的图片剪裁 jQuery 插件。该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持 canvas,并且支持跨浏览器使用。

官网:https://fengyuanchen.github.io/cropperjs/

cropper 免费 CDN 

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) 打赏
未经允许不得转载:王明昌博客 » 实例 | 使用PHP+Cropperjs对图片进行裁剪并保存
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

隐藏
变装