From 57299022b0947c049e7722e15a21d283a3f4d3ed Mon Sep 17 00:00:00 2001 From: acccccccb Date: Thu, 16 Dec 2021 10:48:16 +0800 Subject: [PATCH] vue3 --- README-zh-CN.md | 360 ++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 354 +++++++++++++++++++++++++++++++++++++++++++++-- src/App.vue | 6 +- 3 files changed, 706 insertions(+), 14 deletions(-) create mode 100644 README-zh-CN.md diff --git a/README-zh-CN.md b/README-zh-CN.md new file mode 100644 index 0000000..6257cf1 --- /dev/null +++ b/README-zh-CN.md @@ -0,0 +1,360 @@ +# vue-img-cutter + +#### [English documents](README.md) + +简单易用的 vue 图片裁剪插件，支持旋转、缩放、平移，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。 + +[![GitHub stars](https://img.shields.io/github/stars/acccccccb/vue-img-cutter?style=for-the-badge)](https://github.com/acccccccb/vue-img-cutter/stargazers) +[![GitHub forks](https://img.shields.io/github/forks/acccccccb/vue-img-cutter?style=for-the-badge)](https://github.com/acccccccb/vue-img-cutter/network) +[![npm](https://img.shields.io/npm/v/vue-img-cutter?style=for-the-badge)](https://www.npmjs.com/package/vue-img-cutter) +[![npm](https://img.shields.io/npm/dt/vue-img-cutter?style=for-the-badge)](https://www.npmjs.com/package/vue-img-cutter) + +### 特色： + +--- + +- 兼容 IE9+,MSEdge,Chrome,Firefox +- 两种展现形式，行内或弹窗 +- 可旋转、缩放图片 +- 任意比例、大小裁剪 +- 固定比例、大小裁剪 +- 支持远程图片裁剪、跨域设置 + +### 插件截图： + +--- + +![插件截图](https://i.bmp.ovh/imgs/2019/11/28f8a9059f089e05.png) + +### 演示地址： + +--- + +[https://www.ihtmlcss.com/demo/dist/#/croptool](https://www.ihtmlcss.com/demo/dist/#/croptool) + +### 项目地址： + +--- + +Github：[https://github.com/acccccccb/vue-img-cutter](https://github.com/acccccccb/vue-img-cutter) + +码云：[https://gitee.com/GLUESTICK/vue-img-cutter](https://gitee.com/GLUESTICK/vue-img-cutter) + +**如果此项目对你有帮助，请给我一个 star :)** + +### 使用方法： + +--- + +1. 安装 + +```shell +npm install vue-img-cutter --save-dev # vue2 +npm install vue-img-cutter --save-dev # vue3 +``` + +2. 将 ImgCutter.vue 文件引入项目： + +```javascript +import ImgCutter from 'vue-img-cutter' +export default { + components:{ + ImgCutter + }, +... +} +``` + +3. 在页面中使用： + +```html + +``` + +4. 可使用 solt + +```html + + + +``` + +5. 远程、跨域裁剪（兼容 IE9） + +> ~~需要自己写一个方法来触发裁剪工具弹出~~ + +> ~~在方法中先将图片上传至服务器，拿到返回的 url 后创建一个 obj，然后将对象传入裁剪工具~~ + +> 2.1.9 版本后只需要传入图片 url 和图片名称 + +```javascript +// 传入的obj必须包含这四个属性 +let obj = { + name: '1.jpg', //远程图片名称 + src: 'http://url/1.jpg', //远程图片url + //width:200,//远程图片的原始宽度 2.1.9版本后不需要 + //height:200,//远程图片的原始高度 2.1.9版本后不需要 +}; +``` + +```javascript +forIe9:function(){ + // 传入name，src name中必须包含后缀名 + this.$refs.imgCutterModal.handleOpen({ + name:"image.jpg", + src:"http://imageServ.com/image.jpg", + }); +} +``` + +### 参数说明： + +--- + +| 属性名 | 作用 | 类型 | 必填 | 默认值 | +| :----------------: | :--------------------------------------------------------------: | :----------------: | :--: | :---------------: | +| isModal | 是否为弹窗模式 | Boolean | 否 | true | +| showChooseBtn | 是否显示选择图片按钮 | Boolean | 否 | true | +| lockScroll | 是否在 Dialog 出现时将 body 滚动锁定 | Boolean | 否 | true | +| label | 默认打开裁剪工具按钮的显示文字 | String | 否 | 选择图片 | +| boxWidth | 裁剪工具宽度 | Number | 否 | 800 | +| boxHeight | 裁剪工具高度 | Number | 否 | 400 | +| cutWidth | 默认裁剪宽度 | Number | 否 | 200 | +| cutHeight | 默认裁剪高度 | Number | 否 | 200 | +| tool | 是否显示工具栏 | Boolean | 否 | true | +| toolBgc | 工具栏背景色 | String(例: "#fff") | 否 | #fff | +| sizeChange | 是否能够调整裁剪框大小 | Boolean | 否 | true | +| moveAble | 能否调整裁剪区域位置 | Boolean | 否 | true | +| imgMove | 能否拖动图片 | Boolean | 否 | true | +| originalGraph | 是否直接裁剪原图 | Boolean | 否 | false | +| crossOrigin | 是否设置跨域，需要服务器做相应更改 | Boolean | 否 | false | +| crossOriginHeader | 设置跨域信息 crossOrigin 为 true 时才生效 | String | 否 | '' | +| rate | 图片比例 | String(例: "4:3") | 否 | - | +| WatermarkText | 水印文字 | String | 否 | '' | +| WatermarkTextFont | 水印文字字体 | String | 否 | '12px Sans-serif' | +| WatermarkTextColor | 水印文字颜色 | String | 否 | '#fff' | +| WatermarkTextX | 水印文字水平位置 | Number | 否 | 0.95 | +| WatermarkTextY | 水印文字垂直位置 | Number | 否 | 0.95 | +| smallToUpload | 如果裁剪尺寸固定且图片尺寸小于裁剪尺寸则不裁剪直接返回文件 | Boolean | 否 | false | +| saveCutPosition | 是否保存上一次裁剪位置及大小 | Boolean | 否 | false | +| scaleAble | 是否允许滚轮缩放图片 | Boolean | 否 | true | +| toolBoxOverflow | 是否允许裁剪框超出图片范围 | Boolean | 否 | true | +| index | 自定义参数，将会同结果一起返回 | Any | 否 | null | +| previewMode | 裁剪过程中是否返回裁剪结果，如果裁剪出现卡顿时将此项设置为 false | Boolean | 否 | true | +| fileType | 返回的文件类型 ( png / jpeg / webp) | String | 否 | png | + +> 支持 slot，在组件内部使用带有 slot="open"属性的元素即可自定义打开组件的按钮 + +### 钩子函数： + +| 属性名 | 作用 | 类型 | 必填 | 返回值 | +| :---------: | :--------------------: | :------: | :--: | :----------: | +| cutDown | 完成截图后要执行的方法 | Function | 是 | Object | +| error | 错误回调 | Function | 否 | Error object | +| onChooseImg | 选择图片后 | Function | 否 | Object | +| onPrintImg | 在画布上绘制图片 | Function | 否 | Object | +| onClearAll | 清空画布 | Function | 否 | null | + +### 插槽(slot)： + +| 插槽名称 | 作用 | +| :-------------------: | :---------------: | +| open 或 openImgCutter | 弹出裁剪框 | +| choose | 选择本地图片 | +| cancel | 取消/清空 | +| confirm | 确认裁剪 | +| ratio | 工具栏：宽高比 | +| scaleReset | 工具栏： 重置缩放 | +| turnLeft | 工具栏： 向左旋转 | +| turnRight | 工具栏： 向右旋转 | +| reset | 工具栏： 重置旋转 | +| flipHorizontal | 工具栏： 水平翻转 | +| flipVertically | 工具栏： 垂直翻转 | + +### 返回值 @cutDown： + +--- + +| 属性名 | 类型 | +| :------: | :--------------------------------------------: | +| fileName | 文件名 | +| file | file 类型的文件对象（IE 部分版本可能不会返回） | +| blob | blob 类型的文件对象（IE 部分版本可能不会返回） | +| dataURL | dataURL | +| index | Any | + +### 开发中功能： + +- 原图裁剪 开发中 + +### 捐赠: + +![微信](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/weixinpay.png) +![支付宝](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/alipay.png) + +### 更新日志： + +--- + +#### 3.0.0 + +- chore：构建工具改为 vue3 + +#### 2.2.5 + +- Bugfix：移除 template 中的 this + +#### 2.2.4 + +- 新增参数( toolBoxOverflow ): 是否允许裁剪框超出图片范围 默认值：true + +#### 2.2.3 + +- bug：等比例缩放时，左上角和右上角调整尺寸时的计算优化 [#I3OXMW](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I3OXMW) + +#### 2.2.2 + +- 新增参数(imgMove)：能否拖动图片 默认 true + +#### 2.2.1 + +- 新增参数(fileType)：返回的文件类型 默认 png + +#### 2.2.0 + +- 新增参数(index)：可添加任意参数，将会同结果一起返回，用来区分是那个组件的返回结果 +- 修复 bug：避免底部选择图片按钮位置被外部 text-align 影响 + +#### 2.1.10 + +- 新增两个参数: +- 1.saveCutPosition:是否保存上一次裁剪位置及尺寸 +- 2.scaleAble:是否允许缩放图片 + +#### 2.1.9 + +- 优化了远程裁剪的方法，只需要传入 name 和 src 两个参数 + +#### 2.1.8 + +- 新增参数：smallToUpload 如果裁剪尺寸固定且图片尺寸小于裁剪尺寸则不裁剪直接返回文件 #20 + +#### 2.1.7 + +- 修复 bug:#21 cropPicture 未传值导致裁剪功能失效 + +#### 2.1.6 + +- 新增三个事件钩子：onClearAll,onPrintImg,onChooseImg + +#### 2.1.5 + +- 修复 bug：button 添加属性 type=button + +#### 2.1.4 + +- 修复 bug：原图裁剪宽度显示错误 + +#### 2.1.3 + +- 修复 bug：如果没有选取图片直接点击确定，也能触发裁剪函数 #16，现在如果未选去图片，将会触发错误回调 error +- 修复 bug：配置 rate 截图无法达到预期宽高 #15 + +#### 2.1.2 + +- 增加水平翻转和垂直翻转 +- 新增插槽:ratio,scaleReset,turnLeft,turnRight,reset,flipHorizontal,flipVertically + +#### 2.1.1 + +- 新增英文文档 + +#### 2.1.0 + +- 新增属性：originalGraph，originalGraph 等于 true 时裁剪原图，不支持图像旋转 +- 修复非弹窗模式下无法使用鼠标滚轮缩放图片的问题 + +#### 2.0.30 + +- 修复了选区超出画布的问题 + +#### 2.0.29 + +- 优化了裁剪控件的操作体验 +- 当裁剪宽度/高度小于 20 时隐藏四边中间的操作杆 + +#### 2.0.28 + +- 调整了版本号显示的位置 +- 新增三个插槽：choose/cancel/confirm +- 新增属性：工具栏背景色 toolBgc +- 将裁剪框限制在画布内 + +#### 2.0.27 + +- 修正了裁剪远程图片时创建的 img 对象被显示出来的问题 +- 修正了在 IE 浏览器下点击取消按钮报错的问题 +- 远程图片加载失败时不弹出裁剪工具 + +#### 2.0.26 + +- 修正了当没有选择图片直接选择取消会导致错误的问题 + +#### 2.0.25 + +- 更新说明文档 + +#### 2.0.24 + +- 简化了兼容 IE9 的方法，只需要在执行 this.\$refs['yourComponent'].handleOpen(imgObj)时传入对象，对象必须包含 name,src,width,height 属性 +- 修正了行内模式下鼠标滚轮缩放失效的问题 +- 增加了跨域参数 +- 增加了 error 参数，将会返回错误信息 + +#### 2.0.23 + +- 新增参数 isModal/showChooseBtn/lockScroll +- 可选择作为行内组件或者弹窗组件，可选是否显示选择图片按钮，是否在弹窗打开时锁定 body 滚动 + +#### 2.0.22 + +- 兼容 IE9+,MSEdge,chrome,firefox +- 由于没有找到 IE11 以下的浏览器，所以只能在仿真模式下测试，所以 IE11 以下可能会出现一些我没发现的问题，目前仿真模式下 IE9+都测试通过了。IE8 及以下不再支持。 +- 如果需要兼容 IE9，需要先将图片上传到服务器上，然后执行 this.\$refs['yourComponent'].handleOpen(callback); +- 添加了 importImgToCanv 方法来兼容 IE9，必须在执行 handleOpen 后才能执行 +- 拖动，调整选框时会自动隐藏工具栏 +- 稍微调整了下样式，增加了动态的蚂蚁线 + +#### 2.0.21 + +- 兼容 IE8+,MSEdge,chrome,firefox +- 新增了设置参数，可固定裁剪框位置，固定裁剪尺寸，具体请看参数说明 +- 修复了非 IE 系浏览器不返回 file 对象的问题 + +#### 2.0.20 + +- 兼容 IE11+,MSEdge。IE11 以下版本未测试 + +#### 2.0.19 + +- 修改了返回值，现在将追加返回文件名和 file 类型的文件对象 + +#### 2.0.18 + +- 修复了点击选择图片按钮时有一定几率刷新页面的问题 + +#### 2.0.17 + +- 调整了样式 +- 修正了弹窗超出屏幕后被遮挡的问题 + +#### 2.0.16 + +- 修正了旋转工具条显示错误的问题 + +#### 2.0.15 + +- 增加工具栏 可对图片进行旋转/缩放操作 +- 优化了动画效果 diff --git a/README.md b/README.md index 31c623f..7bc518c 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,352 @@ -# test +# vue-img-cutter -## Project setup -``` -npm install -``` +#### [中文文档](README-zh-CN.md) + +A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size + +[![GitHub stars](https://img.shields.io/github/stars/acccccccb/vue-img-cutter?style=for-the-badge)](https://github.com/acccccccb/vue-img-cutter/stargazers) +[![GitHub forks](https://img.shields.io/github/forks/acccccccb/vue-img-cutter?style=for-the-badge)](https://github.com/acccccccb/vue-img-cutter/network) +[![npm](https://img.shields.io/npm/v/vue-img-cutter?style=for-the-badge)](https://www.npmjs.com/package/vue-img-cutter) +[![npm](https://img.shields.io/npm/dt/vue-img-cutter?style=for-the-badge)](https://www.npmjs.com/package/vue-img-cutter) + +### Features： + +--- + +- For IE9+,MSEdge,Chrome,Firefox +- Your can config it in line or modal +- rotate、zoom +- Cut to scale +- Crop original image +- Crop remote pictures + +### Screenshot： + +--- + +![Screenshot](https://i.bmp.ovh/imgs/2019/11/28f8a9059f089e05.png) + +### Demo： + +--- + +[https://www.ihtmlcss.com/demo/dist/#/croptool](https://www.ihtmlcss.com/demo/dist/#/croptool) + +### Git： + +--- -### Compiles and hot-reloads for development +Github：[https://github.com/acccccccb/vue-img-cutter](https://github.com/acccccccb/vue-img-cutter) + +码云：[https://gitee.com/GLUESTICK/vue-img-cutter](https://gitee.com/GLUESTICK/vue-img-cutter) + +**If this project is helpful to you, please give me a star :)** + +### Usage method： + +--- + +1. Install + +```shell +npm install vue-img-cutter@2 --save-dev # for vue2 +npm install vue-img-cutter@3 --save-dev # for vue3 ``` -npm run serve + +2. Import ImgCutter.vue： + +```javascript +import ImgCutter from 'vue-img-cutter' +export default { + components:{ + ImgCutter + }, +... +} ``` -### Compiles and minifies for production +3. Write the code in template： + +```html + ``` -npm run build + +4. Solt + +```html + + + ``` -### Lints and fixes files +5. This method to be compatible with IE9,it can also be used to crop cross domain images + +> - Create an object(name,src,~~width and height~~ are +> required). + +> - this.\$refs.imgCutterModal.handleOpen(The Object). + +```javascript +// The object like this. +let obj = { + name: '1.jpg', //Image name + src: 'http://url/1.jpg', // Image url + //width:200,//Image width remove in 2.1.9+ + //height:200,//Image height remove in 2.1.9+ +}; ``` -npm run lint + +```javascript +ForIE9:function(){ + // First you need create object have name,src. + // Then trigger handleOpen(obj) and deliver the obj. + this.$refs.imgCutterModal.handleOpen({ + name:"image.jpg", + src:"http://imageServ.com/image.jpg", + }); +} ``` -### Customize configuration -See [Configuration Reference](https://cli.vuejs.org/config/). +### Parameter description： + +--- + +| Attribute | Effect | Type | Require | Default | +| :----------------: | :-------------------------------------------------------------------------------: | :----------------: | :-----: | :---------------: | +| isModal | Is modal | Boolean | No | true | +| showChooseBtn | Show select btn | Boolean | No | true | +| lockScroll | Lock scroll when modal is show | Boolean | No | true | +| label | Button text | String | No | 选择图片 | +| boxWidth | Tool width | Number | No | 800 | +| boxHeight | Tool height | Number | No | 400 | +| cutWidth | Selection box width | Number | No | 200 | +| cutHeight | Selection box height | Number | No | 200 | +| tool | Show toolbar | Boolean | No | true | +| toolBgc | Toolbar background color | String(eg: "#fff") | No | #fff | +| sizeChange | Allow change size | Boolean | No | true | +| moveAble | Allow change position | Boolean | No | true | +| originalGraph | Crop original image | Boolean | No | false | +| crossOrigin | Is cross origin image | Boolean | No | false | +| crossOriginHeader | Set cross origin header | String | No | '' | +| rate | Aspect ratio | String(eg: "4:3") | No | - | +| WatermarkText | Watermark Text | String | No | '' | +| WatermarkTextFont | Watermark font size | String | No | '12px Sans-serif' | +| WatermarkTextColor | Watermark font color | String | No | '#fff' | +| WatermarkTextX | Watermark position x | Number | No | 0.95 | +| WatermarkTextY | Watermark position y | Number | No | 0.95 | +| smallToUpload | If choose image size less then defined Size,return file. sizeChange must be false | Boolean | No | false | +| saveCutPosition | Save last cut position and size | Boolean | No | false | +| scaleAble | Allow scale image | Boolean | No | true | +| imgMove | Allow move image | Boolean | No | true | +| toolBoxOverflow | Allow tool box out of picture range | Boolean | No | true | +| index | Return with result | Any | No | null | +| previewMode | Return results at any time,in case of performance problems, set this to false | Boolean | No | true | +| fileType | Return file type ( png / jpeg / webp) | String | No | png | + +### Hook function： + +| Attribute | Effect | Type | Require | Return | +| :---------: | :-------------------: | :------: | :-----: | :----------: | +| cutDown | Cut down image | Function | Yes | Object | +| error | Throw error | Function | No | Error object | +| onChooseImg | ChooseImg | Function | No | Object | +| onPrintImg | Print image to canvas | Function | No | Object | +| onClearAll | Clear all | Function | No | null | + +### Slot（You can use slot="slot name" to custom button）： + +| Slot name | Effect | +| :------------: | :---------------------: | +| open | Choose btn | +| openImgCutter | Choose btn | +| choose | Choose btn(in tool) | +| cancel | Cancel btn | +| confirm | Confirm btn | +| ratio | Toolbar ratio | +| scaleReset | Toolbar reset scale | +| turnLeft | Toolbar turn left | +| turnRight | Toolbar turn right | +| reset | Toolbar reset | +| flipHorizontal | Toolbar flip horizontal | +| flipVertically | Toolbar flip vertically | + +### Return @cutDown： + +--- + +| Attribute | Description | +| :-------: | :--------------------------------------: | +| fileName | File name | +| file | File(Some versions of IE is not support) | +| blob | Blob(Some versions of IE is not support) | +| dataURL | dataURL | + +### Development： + +- Original picture +- Mirror + +### Donation: + +![微信](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/weixinpay.png) +![支付宝](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/alipay.png) + +### Update log： + +#### 3.0.0 + +- chore：Build tool changed to vue3 + +--- + +#### 2.2.5 + +- Bugfix：remove this in template + +#### 2.2.4 + +- New prop( toolBoxOverflow ): Allow tool box out of picture range, default: true + +#### 2.2.3 + +- Bug fix: When you set rate,the control-box didn't reach the expected position [#I3OXMW](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I3OXMW) + +#### 2.2.2 + +- New prop( imgMove ): Allow move img, default: true + +#### 2.2.1 + +- New prop( fileType )：Return file type, default: png + +#### 2.2.0 + +- New prop( index )：Return result with index. +- New prop( previewMode )：Return results at any time,in case of performance problems, set this to false. +- Fix Bug：Update style. + +#### 2.1.10 + +- New features: +- 1.saveCutPosition:Save last cut position and size +- 2.scaleAble:Able/Disable scale image + +#### 2.1.9 + +- Crop original image not need imageObj.width and imageObj.height + +#### 2.1.8 + +- New features：smallToUpload, If choose image size less then defined Size,return file. sizeChange must be false. #20 + +#### 2.1.7 + +- Fix bug:#21 cropPicture() missed params + +#### 2.1.6 + +- Add new hook function：onClearAll,onPrintImg,onChooseImg + +#### 2.1.5 + +- Fix bug:Button add attrib type=button + +#### 2.1.4 + +- Fix bug:Width display error + +#### 2.1.3 + +- Fix bug:When no choose Image,you also can get an empty image,now you will get an error message in error callback +- Fix bug:When rate < 0 the result image size error; + +#### 2.1.2 + +- New features:flip horizontal,flip vertically,Watermark +- Add slot:ratio,scaleReset,turnLeft,turnRight,reset,flipHorizontal,flipVertically + +#### 2.1.1 + +- Add english documents + +#### 2.1.0 + +- Add new attribute:originalGraph，originalGraph +- Fix bug: Inline mode can not scale image. + +#### 2.0.30 + +- Fix bug: Constituency overflow. + +#### 2.0.29 + +- UI optimization. + +#### 2.0.28 + +- Show version +- New slot：choose/cancel/confirm +- New attribute：toolBgc +- Fix bug: Constituency overflow. + +#### 2.0.27 + +- Fix bug:Remote image in the wrong place. +- Fix bug:An error occurred when click cancel btn in IE. +- Fix bug:Error loading remote picture will be correctly handle. + +#### 2.0.26 + +- Fix bug:An error occurred when not choose any image. + +#### 2.0.25 + +- Update readme.md + +#### 2.0.24 + +- Update crop remote pictures method. eg:this.\$refs['yourComponent'].handleOpen(imgObj),imgObj must include(name,src,width,height) +- Fix bug: Inline mode can not scale image. +- New attribute： crossOrigin,crossOriginHeader +- New attribute： error,It can catch error. + +#### 2.0.23 + +- New attribute：isModal/showChooseBtn/lockScroll + +#### 2.0.22 + +- For IE9+,MSEdge,chrome,firefox +- UI optimization. + +#### 2.0.21 + +- For IE8+,MSEdge,chrome,firefox +- New attribute：moveAble,sizeChange +- Fix bug:File is not return. + +#### 2.0.20 + +- For IE11+,MSEdge,Chrome,Firefox + +#### 2.0.19 + +- Result add file. + +#### 2.0.18 + +- Fix bug:Reload pages when first click select image btn. + +#### 2.0.17 + +- UI optimization. + +#### 2.0.16 + +- UI optimization. + +#### 2.0.15 + +- UI optimization. diff --git a/src/App.vue b/src/App.vue index cadb16f..8c8b346 100644 --- a/src/App.vue +++ b/src/App.vue @@ -112,7 +112,11 @@

You can use it in a few simple steps

- 
1.Install: npm i vue-img-cutter --save-dev
+ 
+1.Install:
+    npm i vue-img-cutter@2 -S # For vue2
+    npm i vue-img-cutter@3 -S # For vue3
+                        
2.Import: import ImgCutter from 'vue-img-cutter';