基于vue的图片裁剪特效，基于vue2集上传图片和图片裁剪的插件，使用了element-ui的el-dialog。
vue图片裁剪
Project setup
npminstall
Compiles and hot-reloads for development
npmrunserve
Compiles and minifies for production
npmrunbuild
Lints and fixes files
npmrunlint使用方法说明
基于vue2集上传图片和图片裁剪的插件，使用了element-ui的el-dialog。 the image crop plugin is based on vue,and use element-ui's el-dialog. 复制 src/components/ImageCropping 整个文件夹到你的项目即可使用
基本调用方式
上传图片并裁剪 (upload image and crop) -参考文件src/Main.vue
<ImageCrop:isBoundCheck='true':dataShow='dataShow'@onHide='dataShow=0'@onSuccess='onSuccess'></ImageCrop>
1.1 自由旋转裁剪 (upload image and crop) -参考文件src/Free.vue
<ImageCrop:isBoundCheck='false':dataRotate='true':dataShow='dataShow'@onHide='dataShow=0'@onSuccess='onSuccess'></ImageCrop>
裁剪已有图片 (crop your image) -参考文件src/Image.vue
<ImageCrop:isBoundCheck='true':dataShow='dataShow'dataTitle='裁剪照片':dataFromUrl='true':dataImgSrc='cropImage'@onHide='dataShow=0'@onSuccess='onSuccess'></ImageCrop>
更多参数说明
//图片裁剪插件调用方法<image-cropping:dataWidth="640":dataHeight="480":dataShow="dataShow":limitSize='4096000'limitType='png,jpeg,bmp':uploadUrl="uploadUrl"@onHide='hideFn'@onError='imageCropError'@uploadSuccess="handleAvatarSuccess":isBoundCheck="isBoundCheck":outXy="outxy"></image-cropping>—————–提供给外边传入的参数———————-dataWidth:需要裁剪图片的宽度，dataHeight：需要裁剪图片的高度，dataShow:是否显示插件,limitSize:选择图片大小限制，limitType：支持的图片格式，uploadUrl：上传图片地址，—内置ajax上传图片如参数不满足建议直接修改isBoundCheck：是否需要检测图片边缘（放大，缩小，旋转，拖拽）onHide：关闭裁剪插件时调用的方法，onError：图片加载失败（图片不符合要求时给的提示语）uploadSuccess:图片上传成功回调,outxy:图片露底边的距离，outx：左右可露的距离，outy：上下可露的距离，默认不露底边dataBackground:图片背景默认白色dataRotate:是否要支持自由旋转（仅支持移动端）dataEnableRatio:是否需要高清图片（启用后可适配设备的deviceRatio得到高清图）dataCircle:是否裁剪为圆形（一般用于移动端头像）一些说明组件更适合移动端使用组件使用了element-ui的el-dialog作为弹窗，如果您的框架没有使用它，可以自己改造el-dialog或自己实现弹窗。组件使用了中心缩放算法，体验更佳。组件使用了几个icon用了iconfont，建议自己重新设计图表使用本地的。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/35027.html；
