cropper.js 实现HTML5 裁剪上传头像

cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像。)

option相关参数说明：

viewMode 显示模式

Type: Number
Default: 0
Options:
0: the crop box is just within the container 裁剪框只能在 1内移动
1: the crop box should be within the canvas 裁剪框只能在 2图片内移动
2: the canvas should not be within the container 2图片不全部铺满1 （即缩小时可以有一边出现空隙）
3: the container should be within the canvas 2图片全部铺满1 （即再怎么缩小也不会出现空隙）
dragMode 拖动模式

Default: ‘crop’
Options:
‘crop’: create a new crop box 当鼠标点击一处时根据这个点重新生成一个裁剪框
‘move’: move the canvas 可以拖动图片
‘none’: do nothing 图片就不能拖动了
Define the dragging mode of the cropper.
toggleDragModeOnDblclick 默认true .是否允许拖动模式 “crop” 跟“move” 的切换状态。。即当点下为crop 模式，如果未松开拖动这时就是“move”模式。放开后又为“crop”模式
preview 截图的显示位置型：String(jQuery选择器)，默认值’’
responsive ：类型：Boolean，默认值true。是否在窗口尺寸改变的时候重置cropper。

checkImageOrigin：类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳，及图片的重新加载。
background：类型：Boolean，默认值true。是否在容器上显示网格背景。要想改背景，我是直接改，cropper.css样式中的 cropper-bg

canvas（图片）相关
movable：类型：Boolean，默认值true。是否允许移动图片
rotatable：类型：Boolean，默认值true。是否允许旋转图片。
scalable 默认 true 。是否允许扩展图片。（暂时不知道干嘛用）
zoomable 默认true, 石头允许缩放图片。
zoomOnWheel 默认 true 是否允许鼠标滚轴缩放图片
zoomOnTouch 默认true 是否允许触摸缩放图片（触摸屏上两手指操作。）
wheelZoomRatio 默认0.1 师表滚轴缩放图片比例。即滚一下。图片缩放多少。如 0.1 就是图片的10%

crop(裁剪框)相关
aspectRatio 裁剪框比例默认NaN 例如：: 1 / 1,//裁剪框比例 1：1

modal：类型：Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
cropBoxMovable :默认true ,是否允许拖动裁剪框cropBoxResizable :默认 true,//是否允许拖动改变裁剪框大小
autoCrop：类型：Boolean，默认值true。是否允许在初始化时自动出现裁剪框。autoCropArea：类型：Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。highlight：类型：Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
guides：类型：Boolean，默认值true。是否在剪裁框上显示虚线。
center: 默认true 是否显示裁剪框中间的+
restore : 类型：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事件的简写方式。 ====== 放大执行

cropper.js 实现HTML5 裁剪上传头像相关推荐

cropper.js插件做图片上传裁剪图片大小
前端代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="U ...
html实现选择头像,HTML5实现上传头像图片大小选择（简单实现）
HTML5仿微博图片上传后大小选择,请使用chrom或者FireFox运行.如果报SECURITY_ERR需要把文件放在服务器端.比如nginx里. 1.[代码][HTML]代码 New Docume ...
cropperjs裁剪上传头像使用方法
头像的更新流程 1-创建表单的隐藏域 2-监听隐藏域的change事件 3-利用domElement.files方法获取到用户所选择的文件 4-如果是单选,则直接files[0] 5-得到的files ...
头像上传html js版,点击上传头像预览
[javascript]代码库 HTML5上传图片预览请选择图片文件:JPG/GIF $("#file0").change(function(){ var objUrl = ge ...
基于cropper和sweetalert的简单图片/头像裁剪上传
基本功能前端基本样式: 进行图片裁剪及上传: 点击上传后,js会将截取到的数据转为图片数据利用ajax发送给后台进行存储.存储成功后,刷新前端页面,头像改变. 上传成功后:自动刷新网页,更改头像基 ...
图片裁剪上传插件—jquery.photoClip.js
分别介绍了两种插件 1.cropper.js 具体详情:https://segmentfault.com/a/1190000012344970 (1)在页面直接使用cropper 接下来只是实现一个简 ...
小程序上传头像图片裁剪
原文链接:https://blog.csdn.net/qq_41049816/article/details/90604607* 给网上收到的不知道好不好用先收藏着: 小程序涉及到了用户上传头像的 ...
vue 移动端头像裁剪_移动端上传头像并裁剪功能(h5)
移动端头像图片上传裁剪 .button { outline: 0; display: inline-block; margin-bottom: 0; font-weight: 400; text-al ...
【小程序开发原创】小程序裁剪图片上传头像，二维码源码
微信小程序图片裁剪工具,简单易用项目需求在做微信小程序的时候有个图片上传之前裁剪的需求,找过一些github中的项目,都不太理想,主要是没有办法自定义宽高,于是自己研究了一下,做了一个简单的图片 ...

cropper.js 实现HTML5 裁剪上传头像

cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像。)

cropper.js 实现HTML5 裁剪上传头像相关推荐

最新文章

热门文章