vue图片裁剪(原创)

所属分类:媒体,输入-图像,上传

 18290  179  查看评论 (3)
分享到微信朋友圈
X
vue图片裁剪(原创) ie兼容11

更新时间:2020-06-02 00:21:44

vue图片裁剪

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

使用方法说明

基于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,建议自己重新设计图表使用本地的。

感谢 手势使用了hammerjs库,特别感谢hammerjs

相关插件-图像,上传

移动端图片滤镜效果

在手机上常用到的图片滤镜效果
  图像
 28862  385

二维码生成插件qrcode.js

二维码生成插件qrcode.js,在此插件基础上添加了logo图片功能和对中文的支持,无需对中文转码可直接支持生成中文网址二维码
  图像
 29940  375

html5前端图片压缩

html5前端图片压缩
  图像
 85022  454

Beer Slider一款轻量级的图片对比插件

它的基本目的是比较图像的两个版本,例如在两个不同时刻拍摄的相同对象,预编辑的照片及其处理版本,草图和完成的插图等。
  图像
 28388  358

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    鸭鸭 0
    2020/7/14 10:53:56
    东西不错 是jquery写的插件 还要引入jquery
    强定义模式下还要删除部分定义的无用参数 调试了好半天的说... 回复
    GCJBest 0
    2020/6/23 0:44:05
    大佬,我复制components 里面的组件到我的项目里 但是用不了啊
        TJc.fool10
        2020/11/17 15:40:23
        https://github.com/superchangme/ImageCropping 你可以去这下载代码安装依赖直接跑起来
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复