├── .editorconfig ├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ └── bug_report.md ├── .gitignore ├── .npmignore ├── .prettierrc ├── LICENSE ├── README-zh-CN.md ├── README.md ├── _config.yml ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── ImgCutter.vue ├── i18n │ ├── index.js │ └── lang │ │ ├── en-US.js │ │ └── zh-CN.js ├── index.js └── main.js ├── static ├── .gitkeep └── image │ └── eg.png └── vue.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [acccccccb] 4 | thanks_dev: gh/acccccccb 5 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **bug描述** 11 | 详细描述bug是在什么操作下出现的，最好带上截图，如果可以线上预览，请附上链接 12 | **版本号** 13 | 此bug出现在哪个版本 14 | **浏览器版本** 15 | IE/Edge/Firefox/Chrome 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /* 2 | /**/* 3 | !/src/components/*.vue 4 | !/src/index.js 5 | !/package.json -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "embeddedLanguageFormatting": "auto", 5 | "htmlWhitespaceSensitivity": "css", 6 | "insertPragma": false, 7 | "jsxBracketSameLine": true, 8 | "jsxSingleQuote": false, 9 | "printWidth": 120, 10 | "proseWrap": "preserve", 11 | "quoteProps": "as-needed", 12 | "requirePragma": false, 13 | "semi": true, 14 | "singleQuote": true, 15 | "tabWidth": 4, 16 | "trailingComma": "es5", 17 | "useTabs": false, 18 | "vueIndentScriptAndStyle": true 19 | } 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 ihtmlcss.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README-zh-CN.md: -------------------------------------------------------------------------------- 1 | # vue-img-cutter 2 | 3 | #### [English documents](README.md) 4 | 5 | 简单易用的 vue 图片裁剪插件，支持旋转、缩放、平移，固定比例，固定尺寸，远程图片裁剪，只需要很少的代码就可以实现裁剪功能，也可以通过调整参数以适应你自己的业务需求。 6 | 7 | [![GitHub stars](https://img.shields.io/github/stars/acccccccb/vue-img-cutter?style=for-the-badge)](https://github.com/acccccccb/vue-img-cutter/stargazers) 8 | [![GitHub forks](https://img.shields.io/github/forks/acccccccb/vue-img-cutter?style=for-the-badge)](https://github.com/acccccccb/vue-img-cutter/network) 9 | [![npm](https://img.shields.io/npm/v/vue-img-cutter?style=for-the-badge)](https://www.npmjs.com/package/vue-img-cutter) 10 | [![npm](https://img.shields.io/npm/dt/vue-img-cutter?style=for-the-badge)](https://www.npmjs.com/package/vue-img-cutter) 11 | 12 | ### 特色： 13 | 14 | --- 15 | 16 | - 兼容 IE9+,MSEdge,Chrome,Firefox 17 | - 两种展现形式，行内或弹窗 18 | - 可旋转、缩放图片 19 | - 任意比例、大小裁剪 20 | - 固定比例、大小裁剪 21 | - 支持远程图片裁剪、跨域设置 22 | 23 | ### 插件截图： 24 | 25 | --- 26 | 27 | ![插件截图](https://i.bmp.ovh/imgs/2019/11/28f8a9059f089e05.png) 28 | 29 | ### 演示地址： 30 | 31 | --- 32 | 33 | [https://www.ihtmlcss.com/demo/dist/#/croptool](https://www.ihtmlcss.com/demo/dist/#/croptool) 34 | 35 | ### 项目地址： 36 | 37 | --- 38 | 39 | Github：[https://github.com/acccccccb/vue-img-cutter](https://github.com/acccccccb/vue-img-cutter) 40 | 41 | 码云：[https://gitee.com/GLUESTICK/vue-img-cutter](https://gitee.com/GLUESTICK/vue-img-cutter) 42 | 43 | **如果此项目对你有帮助，请给我一个 star :)** 44 | 45 | ### 使用方法： 46 | 47 | --- 48 | 49 | 1. 安装 50 | 51 | ```shell 52 | npm install vue-img-cutter --save-dev # vue2 53 | npm install vue-img-cutter --save-dev # vue3 54 | ``` 55 | 56 | 2. 将 ImgCutter.vue 文件引入项目： 57 | 58 | ```javascript 59 | import ImgCutter from 'vue-img-cutter' 60 | export default { 61 | components:{ 62 | ImgCutter 63 | }, 64 | ... 65 | } 66 | ``` 67 | 68 | 3. 在页面中使用： 69 | 70 | ```html 71 | 72 | ``` 73 | 74 | 4. 可使用 solt 75 | 76 | ```html 77 | 78 | 81 | 82 | ``` 83 | 84 | 5. 远程、跨域裁剪（兼容 IE9） 85 | 86 | > ~~需要自己写一个方法来触发裁剪工具弹出~~ 87 | 88 | > ~~在方法中先将图片上传至服务器，拿到返回的 url 后创建一个 obj，然后将对象传入裁剪工具~~ 89 | 90 | > 2.1.9 版本后只需要传入图片 url 和图片名称 91 | 92 | ```javascript 93 | // 传入的obj必须包含这四个属性 94 | let obj = { 95 | name: '1.jpg', //远程图片名称 96 | src: 'http://url/1.jpg', //远程图片url 97 | //width:200,//远程图片的原始宽度 2.1.9版本后不需要 98 | //height:200,//远程图片的原始高度 2.1.9版本后不需要 99 | }; 100 | ``` 101 | 102 | ```javascript 103 | forIe9:function(){ 104 | // 传入name，src name中必须包含后缀名 105 | this.$refs.imgCutterModal.handleOpen({ 106 | name:"image.jpg", 107 | src:"http://imageServ.com/image.jpg", 108 | }); 109 | } 110 | ``` 111 | 112 | ### 参数说明： 113 | 114 | --- 115 | 116 | | 属性名 | 作用 | 类型 | 必填 | 默认值 | 117 | | :----------------: | :--------------------------------------------------------------: | :----------------------------: | :--: | :--------------------------------: | 118 | | isModal | 是否为弹窗模式 | Boolean | 否 | true | 119 | | showChooseBtn | 是否显示选择图片按钮 | Boolean | 否 | true | 120 | | lockScroll | 是否在 Dialog 出现时将 body 滚动锁定 | Boolean | 否 | true | 121 | | modalTitle | 弹窗标题文字 | String | 否 | 图片裁剪 | 122 | | boxWidth | 裁剪工具宽度 | Number | 否 | 800 | 123 | | boxHeight | 裁剪工具高度 | Number | 否 | 400 | 124 | | cutWidth | 默认裁剪宽度 | Number | 否 | 200 | 125 | | cutHeight | 默认裁剪高度 | Number | 否 | 200 | 126 | | tool | 是否显示工具栏 | Boolean | 否 | true | 127 | | toolBgc | 工具栏背景色 | String(例: "#fff") | 否 | #fff | 128 | | sizeChange | 是否能够调整裁剪框大小 | Boolean | 否 | true | 129 | | moveAble | 能否调整裁剪区域位置 | Boolean | 否 | true | 130 | | imgMove | 能否拖动图片 | Boolean | 否 | true | 131 | | originalGraph | 是否直接裁剪原图 | Boolean | 否 | false | 132 | | crossOrigin | 是否设置跨域，需要服务器做相应更改 | Boolean | 否 | false | 133 | | crossOriginHeader | 设置跨域信息 crossOrigin 为 true 时才生效 | String | 否 | '' | 134 | | rate | 图片比例 | String(例: "4:3") | 否 | - | 135 | | WatermarkText | 水印文字 | String | 否 | '' | 136 | | WatermarkTextFont | 水印文字字体 | String | 否 | '12px Sans-serif' | 137 | | WatermarkTextColor | 水印文字颜色 | String | 否 | '#fff' | 138 | | WatermarkTextX | 水印文字水平位置 | Number | 否 | 0.95 | 139 | | WatermarkTextY | 水印文字垂直位置 | Number | 否 | 0.95 | 140 | | smallToUpload | 如果裁剪尺寸固定且图片尺寸小于裁剪尺寸则不裁剪直接返回文件 | Boolean | 否 | false | 141 | | saveCutPosition | 是否保存上一次裁剪位置及大小 | Boolean | 否 | false | 142 | | scaleAble | 是否允许滚轮缩放图片 | Boolean | 否 | true | 143 | | toolBoxOverflow | 是否允许裁剪框超出图片范围 | Boolean | 否 | true | 144 | | index | 自定义参数，将会同结果一起返回 | Any | 否 | null | 145 | | previewMode | 裁剪过程中是否返回裁剪结果，如果裁剪出现卡顿时将此项设置为 false | Boolean | 否 | true | 146 | | fileType | 返回的文件类型 ( png / jpeg / webp) | String | 否 | png | 147 | | quality | 图像质量 | Number | No | 1 | 148 | | accept | 图片类型 | String | No | 'image/gif, image/jpeg ,image/png' | 149 | | afterChooseImg | 选择图片前钩子函数 | () => Promise.resolve(Boolean) | No | - | 150 | 151 | > 支持 slot，在组件内部使用带有 slot="open"属性的元素即可自定义打开组件的按钮 152 | 153 | ### 钩子函数： 154 | 155 | | 属性名 | 作用 | 类型 | 必填 | 返回值 | 156 | | :-----------------: | :--------------------: | :------: | :--: | :----------: | 157 | | cutDown | 完成截图后要执行的方法 | Function | 是 | Object | 158 | | error | 错误回调 | Function | 否 | Error object | 159 | | onChooseImg | 选择图片后 | Function | 否 | Object | 160 | | onPrintImg | 在画布上绘制图片 | Function | 否 | Object | 161 | | onClearAll | 清空画布 | Function | 否 | null | 162 | | onImageLoadComplete | 图片加载完成 | Function | 否 | Object | 163 | | onImageLoadError | 图片加载失败 | Function | 否 | Object | 164 | 165 | ### 插槽(slot)： 166 | 167 | | 插槽名称 | 作用 | 168 | | :-------------------: | :---------------: | 169 | | open 或 openImgCutter | 弹出裁剪框 | 170 | | choose | 选择本地图片 | 171 | | cancel | 取消/清空 | 172 | | confirm | 确认裁剪 | 173 | | ratio | 工具栏：宽高比 | 174 | | scaleReset | 工具栏： 重置缩放 | 175 | | turnLeft | 工具栏： 向左旋转 | 176 | | turnRight | 工具栏： 向右旋转 | 177 | | reset | 工具栏： 重置旋转 | 178 | | flipHorizontal | 工具栏： 水平翻转 | 179 | | flipVertically | 工具栏： 垂直翻转 | 180 | 181 | ### 返回值 @cutDown： 182 | 183 | --- 184 | 185 | | 属性名 | 类型 | 186 | | :------: | :--------------------------------------------: | 187 | | fileName | 文件名 | 188 | | file | file 类型的文件对象（IE 部分版本可能不会返回） | 189 | | blob | blob 类型的文件对象（IE 部分版本可能不会返回） | 190 | | dataURL | dataURL | 191 | | index | Any | 192 | 193 | ### 开发中功能： 194 | 195 | - 原图裁剪 开发中 196 | 197 | ### 捐赠: 198 | 199 | ![微信](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/weixinpay.png) 200 | ![支付宝](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/alipay.png) 201 | 202 | ### 更新日志： 203 | 204 | --- 205 | 206 | #### 3.0.7 207 | - 修复 bug：afterChooseImg 没有返回文件信息 [#afterChooseImg钩子函数](https://gitee.com/GLUESTICK/vue-img-cutter/issues/IBTM5M) 208 | 209 | --- 210 | 211 | #### 3.0.6 212 | 213 | - 新增属性：(modalTitle)：弹窗标题文字 [#插件弹窗的标题 #86](https://github.com/acccccccb/vue-img-cutter/issues/86) 214 | - 新增属性：(afterChooseImg)：选择图片后回调，需要返回一个 Promise [#可以在上传图片之前回调一个 beforeUpload 函数自行对图片做限制吗？ #86](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I8L4D3) 215 | - 修复 bug: [#旋转操作优化](https://gitee.com/GLUESTICK/vue-img-cutter/issues/IAYZNF) 216 | - 优化：调整@error 返回值，现在将返回错误类型 217 | - 优化：现在将检查文件类型是否为图片 218 | - 注意：onImageLoadError 将在之后的版本移除，请使用 @error 219 | - 新增开发依赖：prettier@2 220 | 221 | --- 222 | 223 | #### 3.0.5 224 | 225 | - 新增属性：(onImageLoadComplete)：onImageLoadComplete 加载图片完成事件 [#使用远程图片方法 有没有办法还没加载出来之前 有个 loading #85](https://github.com/acccccccb/vue-img-cutter/issues/85) 226 | - 新增属性：(onImageLoadError)：onImageLoadError 加载图片失败事件 227 | - 修复 bug：[# fix(other): 修复 canvas.toBlob 方法第二、第三个参数位置错误的情况 #84](https://github.com/acccccccb/vue-img-cutter/pull/84) 感谢[nowo](https://github.com/nowo) 228 | - 更新 LICENSE 229 | 230 | --- 231 | 232 | #### 3.0.5 233 | 234 | - 新增属性：(onImageLoadComplete)：onImageLoadComplete 加载图片完成事件 [#使用远程图片方法 有没有办法还没加载出来之前 有个 loading #85](https://github.com/acccccccb/vue-img-cutter/issues/85) 235 | - 新增属性：(onImageLoadError)：onImageLoadError 加载图片失败事件 236 | - 修复 bug：[# fix(other): 修复 canvas.toBlob 方法第二、第三个参数位置错误的情况 #84](https://github.com/acccccccb/vue-img-cutter/pull/84) 感谢[nowo](https://github.com/nowo) 237 | - 更新 LICENSE 238 | 239 | #### 3.0.4 240 | 241 | - 新增属性：accept[#可不可以在文件上传的 accept 中加上 webp #80](https://github.com/acccccccb/vue-img-cutter/issues/80) 242 | 243 | #### 3.0.3 244 | 245 | - bugfix：[#固定裁剪框位置时图片拖动优化建议 #74](https://github.com/acccccccb/vue-img-cutter/issues/74) 246 | 247 | --- 248 | 249 | #### 3.0.2 250 | 251 | - bugfix：[#note_11139264](https://gitee.com/GLUESTICK/vue-img-cutter#note_11139264) 252 | 253 | - bugfix：[#64](https://github.com/acccccccb/vue-img-cutter/issues/64) 254 | 255 | - 新增参数（quality）: 裁剪图片质量，0 到 1 之间，默认 1 256 | 257 | --- 258 | 259 | #### 3.0.1 260 | 261 | - bugfix：[#I4SDOE](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I4SDOE) 262 | 263 | - bugfix: dialog-footer 默认高度 40px 264 | 265 | - bugfix: 显示宽高及坐标移除小数点 266 | 267 | #### 3.0.0 268 | 269 | - chore：构建工具改为 vue3 270 | 271 | #### 2.2.6 272 | 273 | - 新增属性：accept[#可不可以在文件上传的 accept 中加上 webp #80](https://github.com/acccccccb/vue-img-cutter/issues/80) 274 | 275 | #### 2.2.5 276 | 277 | - Bugfix：移除 template 中的 this 278 | 279 | #### 2.2.4 280 | 281 | - 新增参数( toolBoxOverflow ): 是否允许裁剪框超出图片范围 默认值：true 282 | 283 | #### 2.2.3 284 | 285 | - bug：等比例缩放时，左上角和右上角调整尺寸时的计算优化 [#I3OXMW](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I3OXMW) 286 | 287 | #### 2.2.2 288 | 289 | - 新增参数(imgMove)：能否拖动图片 默认 true 290 | 291 | #### 2.2.1 292 | 293 | - 新增参数(fileType)：返回的文件类型 默认 png 294 | 295 | #### 2.2.0 296 | 297 | - 新增参数(index)：可添加任意参数，将会同结果一起返回，用来区分是那个组件的返回结果 298 | - 修复 bug：避免底部选择图片按钮位置被外部 text-align 影响 299 | 300 | #### 2.1.10 301 | 302 | - 新增两个参数: 303 | - 1.saveCutPosition:是否保存上一次裁剪位置及尺寸 304 | - 2.scaleAble:是否允许缩放图片 305 | 306 | #### 2.1.9 307 | 308 | - 优化了远程裁剪的方法，只需要传入 name 和 src 两个参数 309 | 310 | #### 2.1.8 311 | 312 | - 新增参数：smallToUpload 如果裁剪尺寸固定且图片尺寸小于裁剪尺寸则不裁剪直接返回文件 #20 313 | 314 | #### 2.1.7 315 | 316 | - 修复 bug:#21 cropPicture 未传值导致裁剪功能失效 317 | 318 | #### 2.1.6 319 | 320 | - 新增三个事件钩子：onClearAll,onPrintImg,onChooseImg 321 | 322 | #### 2.1.5 323 | 324 | - 修复 bug：button 添加属性 type=button 325 | 326 | #### 2.1.4 327 | 328 | - 修复 bug：原图裁剪宽度显示错误 329 | 330 | #### 2.1.3 331 | 332 | - 修复 bug：如果没有选取图片直接点击确定，也能触发裁剪函数 #16，现在如果未选去图片，将会触发错误回调 error 333 | - 修复 bug：配置 rate 截图无法达到预期宽高 #15 334 | 335 | #### 2.1.2 336 | 337 | - 增加水平翻转和垂直翻转 338 | - 新增插槽:ratio,scaleReset,turnLeft,turnRight,reset,flipHorizontal,flipVertically 339 | 340 | #### 2.1.1 341 | 342 | - 新增英文文档 343 | 344 | #### 2.1.0 345 | 346 | - 新增属性：originalGraph，originalGraph 等于 true 时裁剪原图，不支持图像旋转 347 | - 修复非弹窗模式下无法使用鼠标滚轮缩放图片的问题 348 | 349 | #### 2.0.30 350 | 351 | - 修复了选区超出画布的问题 352 | 353 | #### 2.0.29 354 | 355 | - 优化了裁剪控件的操作体验 356 | - 当裁剪宽度/高度小于 20 时隐藏四边中间的操作杆 357 | 358 | #### 2.0.28 359 | 360 | - 调整了版本号显示的位置 361 | - 新增三个插槽：choose/cancel/confirm 362 | - 新增属性：工具栏背景色 toolBgc 363 | - 将裁剪框限制在画布内 364 | 365 | #### 2.0.27 366 | 367 | - 修正了裁剪远程图片时创建的 img 对象被显示出来的问题 368 | - 修正了在 IE 浏览器下点击取消按钮报错的问题 369 | - 远程图片加载失败时不弹出裁剪工具 370 | 371 | #### 2.0.26 372 | 373 | - 修正了当没有选择图片直接选择取消会导致错误的问题 374 | 375 | #### 2.0.25 376 | 377 | - 更新说明文档 378 | 379 | #### 2.0.24 380 | 381 | - 简化了兼容 IE9 的方法，只需要在执行 this.\$refs['yourComponent'].handleOpen(imgObj)时传入对象，对象必须包含 name,src,width,height 属性 382 | - 修正了行内模式下鼠标滚轮缩放失效的问题 383 | - 增加了跨域参数 384 | - 增加了 error 参数，将会返回错误信息 385 | 386 | #### 2.0.23 387 | 388 | - 新增参数 isModal/showChooseBtn/lockScroll 389 | - 可选择作为行内组件或者弹窗组件，可选是否显示选择图片按钮，是否在弹窗打开时锁定 body 滚动 390 | 391 | #### 2.0.22 392 | 393 | - 兼容 IE9+,MSEdge,chrome,firefox 394 | - 由于没有找到 IE11 以下的浏览器，所以只能在仿真模式下测试，所以 IE11 以下可能会出现一些我没发现的问题，目前仿真模式下 IE9+都测试通过了。IE8 及以下不再支持。 395 | - 如果需要兼容 IE9，需要先将图片上传到服务器上，然后执行 this.\$refs['yourComponent'].handleOpen(callback); 396 | - 添加了 importImgToCanv 方法来兼容 IE9，必须在执行 handleOpen 后才能执行 397 | - 拖动，调整选框时会自动隐藏工具栏 398 | - 稍微调整了下样式，增加了动态的蚂蚁线 399 | 400 | #### 2.0.21 401 | 402 | - 兼容 IE8+,MSEdge,chrome,firefox 403 | - 新增了设置参数，可固定裁剪框位置，固定裁剪尺寸，具体请看参数说明 404 | - 修复了非 IE 系浏览器不返回 file 对象的问题 405 | 406 | #### 2.0.20 407 | 408 | - 兼容 IE11+,MSEdge。IE11 以下版本未测试 409 | 410 | #### 2.0.19 411 | 412 | - 修改了返回值，现在将追加返回文件名和 file 类型的文件对象 413 | 414 | #### 2.0.18 415 | 416 | - 修复了点击选择图片按钮时有一定几率刷新页面的问题 417 | 418 | #### 2.0.17 419 | 420 | - 调整了样式 421 | - 修正了弹窗超出屏幕后被遮挡的问题 422 | 423 | #### 2.0.16 424 | 425 | - 修正了旋转工具条显示错误的问题 426 | 427 | #### 2.0.15 428 | 429 | - 增加工具栏 可对图片进行旋转/缩放操作 430 | - 优化了动画效果 431 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-img-cutter 2 | 3 | #### [中文文档](README-zh-CN.md) 4 | 5 | A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size 6 | 7 | [![GitHub stars](https://img.shields.io/github/stars/acccccccb/vue-img-cutter?style=for-the-badge)](https://github.com/acccccccb/vue-img-cutter/stargazers) 8 | [![GitHub forks](https://img.shields.io/github/forks/acccccccb/vue-img-cutter?style=for-the-badge)](https://github.com/acccccccb/vue-img-cutter/network) 9 | [![npm](https://img.shields.io/npm/v/vue-img-cutter?style=for-the-badge)](https://www.npmjs.com/package/vue-img-cutter) 10 | [![npm](https://img.shields.io/npm/dt/vue-img-cutter?style=for-the-badge)](https://www.npmjs.com/package/vue-img-cutter) 11 | 12 | ### Features： 13 | 14 | --- 15 | 16 | - For IE9+,MSEdge,Chrome,Firefox 17 | - Your can config it in line or modal 18 | - rotate、zoom 19 | - Cut to scale 20 | - Crop original image 21 | - Crop remote pictures 22 | 23 | ### Screenshot： 24 | 25 | --- 26 | 27 | ![Screenshot](https://i.bmp.ovh/imgs/2019/11/28f8a9059f089e05.png) 28 | 29 | ### Demo： 30 | 31 | --- 32 | 33 | [https://www.ihtmlcss.com/demo/dist/#/croptool](https://www.ihtmlcss.com/demo/dist/#/croptool) 34 | 35 | ### Git： 36 | 37 | --- 38 | 39 | Github：[https://github.com/acccccccb/vue-img-cutter](https://github.com/acccccccb/vue-img-cutter) 40 | 41 | 码云：[https://gitee.com/GLUESTICK/vue-img-cutter](https://gitee.com/GLUESTICK/vue-img-cutter) 42 | 43 | **If this project is helpful to you, please give me a star :)** 44 | 45 | ### Usage method： 46 | 47 | --- 48 | 49 | 1. Install 50 | 51 | ```shell 52 | npm install vue-img-cutter@2 --save-dev # for vue2 53 | npm install vue-img-cutter@3 --save-dev # for vue3 54 | ``` 55 | 56 | 2. Import ImgCutter.vue： 57 | 58 | ```javascript 59 | import ImgCutter from 'vue-img-cutter' 60 | export default { 61 | components:{ 62 | ImgCutter 63 | }, 64 | ... 65 | } 66 | ``` 67 | 68 | 3. Write the code in template： 69 | 70 | ```html 71 | 72 | ``` 73 | 74 | 4. Solt 75 | 76 | ```html 77 | 78 | 81 | 82 | ``` 83 | 84 | 5. This method to be compatible with IE9,it can also be used to crop cross domain images 85 | 86 | > - Create an object(name,src,~~width and height~~ are 87 | > required). 88 | 89 | > - this.\$refs.imgCutterModal.handleOpen(The Object). 90 | 91 | ```javascript 92 | // The object like this. 93 | let obj = { 94 | name: '1.jpg', //Image name 95 | src: 'http://url/1.jpg', // Image url 96 | //width:200,//Image width remove in 2.1.9+ 97 | //height:200,//Image height remove in 2.1.9+ 98 | }; 99 | ``` 100 | 101 | ```javascript 102 | ForIE9:function(){ 103 | // First you need create object have name,src. 104 | // Then trigger handleOpen(obj) and deliver the obj. 105 | this.$refs.imgCutterModal.handleOpen({ 106 | name:"image.jpg", 107 | src:"http://imageServ.com/image.jpg", 108 | }); 109 | } 110 | ``` 111 | 112 | ### Parameter description： 113 | 114 | --- 115 | 116 | | Attribute | Effect | Type | Require | Default | 117 | | :----------------: | :-------------------------------------------------------------------------------: | :----------------------------: | :-----: | :--------------------------------: | 118 | | isModal | Is modal | Boolean | No | true | 119 | | showChooseBtn | Show select btn | Boolean | No | true | 120 | | lockScroll | Lock scroll when modal is show | Boolean | No | true | 121 | | modalTitle | Modal title text | String | No | 图片裁剪 | 122 | | label | Button text | String | No | 选择图片 | 123 | | boxWidth | Tool width | Number | No | 800 | 124 | | boxHeight | Tool height | Number | No | 400 | 125 | | cutWidth | Selection box width | Number | No | 200 | 126 | | cutHeight | Selection box height | Number | No | 200 | 127 | | tool | Show toolbar | Boolean | No | true | 128 | | toolBgc | Toolbar background color | String(eg: "#fff") | No | #fff | 129 | | sizeChange | Allow change size | Boolean | No | true | 130 | | moveAble | Allow change position | Boolean | No | true | 131 | | originalGraph | Crop original image | Boolean | No | false | 132 | | crossOrigin | Is cross origin image | Boolean | No | false | 133 | | crossOriginHeader | Set cross origin header | String | No | '' | 134 | | rate | Aspect ratio | String(eg: "4:3") | No | - | 135 | | WatermarkText | Watermark Text | String | No | '' | 136 | | WatermarkTextFont | Watermark font size | String | No | '12px Sans-serif' | 137 | | WatermarkTextColor | Watermark font color | String | No | '#fff' | 138 | | WatermarkTextX | Watermark position x | Number | No | 0.95 | 139 | | WatermarkTextY | Watermark position y | Number | No | 0.95 | 140 | | smallToUpload | If choose image size less then defined Size,return file. sizeChange must be false | Boolean | No | false | 141 | | saveCutPosition | Save last cut position and size | Boolean | No | false | 142 | | scaleAble | Allow scale image | Boolean | No | true | 143 | | imgMove | Allow move image | Boolean | No | true | 144 | | toolBoxOverflow | Allow tool box out of picture range | Boolean | No | true | 145 | | index | Return with result | Any | No | null | 146 | | previewMode | Return results at any time,in case of performance problems, set this to false | Boolean | No | true | 147 | | fileType | Return file type ( png / jpeg / webp) | String | No | png | 148 | | quality | image quality | Number | No | 1 | 149 | | accept | accept file type | String | No | 'image/gif, image/jpeg ,image/png' | 150 | | afterChooseImg | Before choose image | () => Promise.resolve(Boolean) | No | - | 151 | 152 | ### Hook function： 153 | 154 | | Attribute | Effect | Type | Require | Return | 155 | | :-----------------: | :---------------------: | :------: | :-----: | :----------: | 156 | | cutDown | Cut down image | Function | Yes | Object | 157 | | error | Throw error | Function | No | Error object | 158 | | onChooseImg | ChooseImg | Function | No | Object | 159 | | onPrintImg | Print image to canvas | Function | No | Object | 160 | | onClearAll | Clear all | Function | No | null | 161 | | onImageLoadComplete | Image loading completed | Function | No | Object | 162 | | onImageLoadError | Image loading failed | Function | No | Object | 163 | 164 | ### Slot（You can use slot="slot name" to custom button）： 165 | 166 | | Slot name | Effect | 167 | | :------------: | :---------------------: | 168 | | open | Choose btn | 169 | | openImgCutter | Choose btn | 170 | | choose | Choose btn(in tool) | 171 | | cancel | Cancel btn | 172 | | confirm | Confirm btn | 173 | | ratio | Toolbar ratio | 174 | | scaleReset | Toolbar reset scale | 175 | | turnLeft | Toolbar turn left | 176 | | turnRight | Toolbar turn right | 177 | | reset | Toolbar reset | 178 | | flipHorizontal | Toolbar flip horizontal | 179 | | flipVertically | Toolbar flip vertically | 180 | 181 | ### Return @cutDown： 182 | 183 | --- 184 | 185 | | Attribute | Description | 186 | | :-------: | :--------------------------------------: | 187 | | fileName | File name | 188 | | file | File(Some versions of IE is not support) | 189 | | blob | Blob(Some versions of IE is not support) | 190 | | dataURL | dataURL | 191 | 192 | ### Development： 193 | 194 | - Original picture 195 | - Mirror 196 | 197 | ### Donation: 198 | 199 | ![微信](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/weixinpay.png) 200 | ![支付宝](https://ihtmlcss.oss-cn-chengdu.aliyuncs.com/2020/01/alipay.png) 201 | 202 | ### Update log： 203 | 204 | #### 3.0.7 205 | 206 | - BugFix：No file information returned by afterChooseImg. [#afterChooseImg 钩子函数](https://gitee.com/GLUESTICK/vue-img-cutter/issues/IBTM5M) 207 | 208 | #### 3.0.6 209 | 210 | - New prop：(modalTitle)：Modal title text [#插件弹窗的标题 #86](https://github.com/acccccccb/vue-img-cutter/issues/86) 211 | - New prop：(afterChooseImg)：Callback after selecting an image, must return a Promise. [#可以在上传图片之前回调一个 beforeUpload 函数自行对图片做限制吗？ #86](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I8L4D3) 212 | - BugFix: [#Rotation operation optimization](https://gitee.com/GLUESTICK/vue-img-cutter/issues/IAYZNF) 213 | - Optimization: Adjusted @error return value; it now returns the error type. 214 | - Optimization: Now checks whether the file type is an image. 215 | - Notice：onImageLoadError will be removed in future versions, please use @error instead. 216 | - New dev dependency：prettier@2 217 | 218 | #### 3.0.5 219 | 220 | - New prop(onImageLoadComplete)：New Event: onImageLoadComplete [#使用远程图片方法 有没有办法还没加载出来之前 有个 loading #85](https://github.com/acccccccb/vue-img-cutter/issues/85) 221 | - New prop(onImageLoadError)：New Event: onImageLoadError 222 | - BugFix：[# fix(other): 修复 canvas.toBlob 方法第二、第三个参数位置错误的情况 #84](https://github.com/acccccccb/vue-img-cutter/pull/84) Thanks [nowo](https://github.com/nowo) 223 | - Update LICENSE 224 | 225 | #### 3.0.4 226 | 227 | - New prop(accept)：accept file type[#可不可以在文件上传的 accept 中加上 webp #80](https://github.com/acccccccb/vue-img-cutter/issues/80) 228 | 229 | #### 3.0.3 230 | 231 | - bugfix：[#固定裁剪框位置时图片拖动优化建议 #74](https://github.com/acccccccb/vue-img-cutter/issues/74) 232 | 233 | #### 3.0.2 234 | 235 | - bugfix：[#note_11139264](https://gitee.com/GLUESTICK/vue-img-cutter#note_11139264) 236 | 237 | - bugfix：[#64](https://github.com/acccccccb/vue-img-cutter/issues/64) 238 | 239 | - New prop( quality ) : A Number between 0 and 1 indicating the image quality 240 | 241 | #### 3.0.1 242 | 243 | - bugfix：[#I4SDOE](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I4SDOE) 244 | 245 | - bugfix: dialog-footer default height 40px 246 | 247 | - bugfix: width height x and y convert to int 248 | 249 | #### 3.0.0 250 | 251 | - chore：Build tool changed to vue3 252 | 253 | --- 254 | 255 | #### 2.2.6 256 | 257 | - New prop(accept)：accept file type[#可不可以在文件上传的 accept 中加上 webp #80](https://github.com/acccccccb/vue-img-cutter/issues/80) 258 | 259 | #### 2.2.5 260 | 261 | - Bugfix：remove this in template 262 | 263 | #### 2.2.4 264 | 265 | - New prop( toolBoxOverflow ): Allow tool box out of picture range, default: true 266 | 267 | #### 2.2.3 268 | 269 | - 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) 270 | 271 | #### 2.2.2 272 | 273 | - New prop( imgMove ): Allow move img, default: true 274 | 275 | #### 2.2.1 276 | 277 | - New prop( fileType )：Return file type, default: png 278 | 279 | #### 2.2.0 280 | 281 | - New prop( index )：Return result with index. 282 | - New prop( previewMode )：Return results at any time,in case of performance problems, set this to false. 283 | - Fix Bug：Update style. 284 | 285 | #### 2.1.10 286 | 287 | - New features: 288 | - 1.saveCutPosition:Save last cut position and size 289 | - 2.scaleAble:Able/Disable scale image 290 | 291 | #### 2.1.9 292 | 293 | - Crop original image not need imageObj.width and imageObj.height 294 | 295 | #### 2.1.8 296 | 297 | - New features：smallToUpload, If choose image size less then defined Size,return file. sizeChange must be false. #20 298 | 299 | #### 2.1.7 300 | 301 | - Fix bug:#21 cropPicture() missed params 302 | 303 | #### 2.1.6 304 | 305 | - Add new hook function：onClearAll,onPrintImg,onChooseImg 306 | 307 | #### 2.1.5 308 | 309 | - Fix bug:Button add attrib type=button 310 | 311 | #### 2.1.4 312 | 313 | - Fix bug:Width display error 314 | 315 | #### 2.1.3 316 | 317 | - Fix bug:When no choose Image,you also can get an empty image,now you will get an error message in error callback 318 | - Fix bug:When rate < 0 the result image size error; 319 | 320 | #### 2.1.2 321 | 322 | - New features:flip horizontal,flip vertically,Watermark 323 | - Add slot:ratio,scaleReset,turnLeft,turnRight,reset,flipHorizontal,flipVertically 324 | 325 | #### 2.1.1 326 | 327 | - Add english documents 328 | 329 | #### 2.1.0 330 | 331 | - Add new attribute:originalGraph，originalGraph 332 | - Fix bug: Inline mode can not scale image. 333 | 334 | #### 2.0.30 335 | 336 | - Fix bug: Constituency overflow. 337 | 338 | #### 2.0.29 339 | 340 | - UI optimization. 341 | 342 | #### 2.0.28 343 | 344 | - Show version 345 | - New slot：choose/cancel/confirm 346 | - New attribute：toolBgc 347 | - Fix bug: Constituency overflow. 348 | 349 | #### 2.0.27 350 | 351 | - Fix bug:Remote image in the wrong place. 352 | - Fix bug:An error occurred when click cancel btn in IE. 353 | - Fix bug:Error loading remote picture will be correctly handle. 354 | 355 | #### 2.0.26 356 | 357 | - Fix bug:An error occurred when not choose any image. 358 | 359 | #### 2.0.25 360 | 361 | - Update readme.md 362 | 363 | #### 2.0.24 364 | 365 | - Update crop remote pictures method. eg:this.\$refs['yourComponent'].handleOpen(imgObj),imgObj must include(name,src,width,height) 366 | - Fix bug: Inline mode can not scale image. 367 | - New attribute： crossOrigin,crossOriginHeader 368 | - New attribute： error,It can catch error. 369 | 370 | #### 2.0.23 371 | 372 | - New attribute：isModal/showChooseBtn/lockScroll 373 | 374 | #### 2.0.22 375 | 376 | - For IE9+,MSEdge,chrome,firefox 377 | - UI optimization. 378 | 379 | #### 2.0.21 380 | 381 | - For IE8+,MSEdge,chrome,firefox 382 | - New attribute：moveAble,sizeChange 383 | - Fix bug:File is not return. 384 | 385 | #### 2.0.20 386 | 387 | - For IE11+,MSEdge,Chrome,Firefox 388 | 389 | #### 2.0.19 390 | 391 | - Result add file. 392 | 393 | #### 2.0.18 394 | 395 | - Fix bug:Reload pages when first click select image btn. 396 | 397 | #### 2.0.17 398 | 399 | - UI optimization. 400 | 401 | #### 2.0.16 402 | 403 | - UI optimization. 404 | 405 | #### 2.0.15 406 | 407 | - UI optimization. 408 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-midnight -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-img-cutter", 3 | "version": "3.0.7", 4 | "description": "A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size", 5 | "author": "ihtmlcss.com", 6 | "private": false, 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build": "vue-cli-service build", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "dependencies": { 13 | "core-js": "^3.20.3", 14 | "vue": "^3.2.29", 15 | "vue-i18n": "^9.1.10" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "~4.5.15", 19 | "@vue/cli-plugin-eslint": "~4.5.15", 20 | "@vue/cli-service": "~4.5.15", 21 | "@vue/compiler-sfc": "^3.2.29", 22 | "babel-eslint": "^10.1.0", 23 | "eslint": "^6.8.0", 24 | "eslint-plugin-vue": "^7.20.0", 25 | "prettier": "2.8.8" 26 | }, 27 | "main": "./src/index.js", 28 | "repository": { 29 | "type": "git", 30 | "url": "git+https://github.com/acccccccb/vue-img-cutter.git" 31 | }, 32 | "keywords": [ 33 | "image", 34 | "crop", 35 | "cutter", 36 | "vue", 37 | "裁剪" 38 | ], 39 | "license": "MIT", 40 | "bugs": { 41 | "url": "https://github.com/acccccccb/vue-img-cutter/issues" 42 | }, 43 | "homepage": "https://ihtmlcss.com/demo/dist/#/croptool", 44 | "eslintConfig": { 45 | "root": true, 46 | "env": { 47 | "node": true 48 | }, 49 | "extends": [ 50 | "plugin:vue/vue3-essential", 51 | "eslint:recommended" 52 | ], 53 | "parserOptions": { 54 | "parser": "babel-eslint" 55 | }, 56 | "rules": {} 57 | }, 58 | "browserslist": [ 59 | "> 1%", 60 | "last 2 versions", 61 | "not dead" 62 | ] 63 | } 64 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acccccccb/vue-img-cutter/5772bde09d5c674874bdb3fa7b6ab58eb187b39b/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | vue-img-cutter 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 773 | 774 | 1053 | 1158 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acccccccb/vue-img-cutter/5772bde09d5c674874bdb3fa7b6ab58eb187b39b/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/ImgCutter.vue: -------------------------------------------------------------------------------- 1 | 252 | 1800 | 2442 | -------------------------------------------------------------------------------- /src/i18n/index.js: -------------------------------------------------------------------------------- 1 | import { createI18n } from 'vue-i18n'; 2 | import zhCn from './lang/zh-CN.js'; 3 | import enUs from './lang/en-US.js'; 4 | 5 | export default createI18n({ 6 | locale: 'zh-CN', 7 | messages: { 8 | 'en-US': enUs, 9 | 'zh-CN': zhCn, 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /src/i18n/lang/en-US.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'introduce.docs': 'Docs', 3 | 'introduce.gitee': 'Gitee', 4 | 'introduce.github': 'Github', 5 | 'introduce.npm': 'Npm', 6 | 'introduce.download': 'Download', 7 | 'introduce.homepage': 'Home page', 8 | 'banner.download': 'Download zip', 9 | 'banner.description': 'A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size', 10 | 'block1.title1': 'Easy to use', 11 | 'block1.title2': 'Increase of efficiency', 12 | 'block1.title3': 'You can use it in a few simple steps', 13 | 'block1.title4': 'Install', 14 | 'block1.title5': 'Import', 15 | 'block1.title6': 'Register', 16 | 'block1.title7': 'Code', 17 | 'block1.title8': 'Return', 18 | 'block2.title1': 'Online configuration', 19 | 'block2.title2': 'Preview and generate code', 20 | 'block2.title3': 'Use this tool to preview and generate code.', 21 | // 预览区域 22 | 'block3.title1': 'Remote pictures src', 23 | 'block3.title2': 'Crop local pictures', 24 | 'block3.title3': 'Crop remote pictures', 25 | 'block3.title4': 'Crop remote pictures(For IE9)', 26 | 'block3.title5': 'Confirm', 27 | 'block3.title6': 'Reset', 28 | 'block3.title7': 'Download picture', 29 | 'block3.title8': 'Cut it out and show it here', 30 | 'block3.title9': 'Choose picture', 31 | 'block3.title10': 'Image Crop Tool', 32 | // 捐赠 33 | 'donation.title1': 'Donation', 34 | 'donation.title2': 'Donate in support of the author', 35 | 'donation.title3': 'Can you buy me a cup of coffee :)', 36 | // 设置项 37 | 'config.title': 'Config tool', 38 | 'config.label': 'Button text', 39 | 'config.boxWidth': 'Tool width', 40 | 'config.boxHeight': 'Tool height', 41 | 'config.cutWidth': 'Selection box width', 42 | 'config.cutHeight': 'Selection box height', 43 | 'config.rate': 'Aspect ratio', 44 | 'config.toolBgc': 'Toolbar background color', 45 | 'config.crossOriginHeader': 'Cross origin header', 46 | 'config.crossOrigin': 'Is cross origin', 47 | 'config.isModal': 'Is modal', 48 | 'config.showChooseBtn': 'Show select button', 49 | 'config.lockScroll': 'Lock scroll', 50 | 'config.sizeChange': 'Allow to change size', 51 | 'config.moveAble': 'Allow to remove crop box', 52 | 'config.tool': 'Show toolbar', 53 | 'config.originalGraph': 'Crop original image', 54 | 'config.saveCutPosition': 'Save cut position', 55 | 'config.scaleAble': 'Allow scale image', 56 | 'config.imgMove': 'Allow move image', 57 | 'config.fileType': 'Return file type', 58 | 'config.index': 'Return result with index', 59 | 'config.smallToUpload': 'If choose image size less then defined Size,return file. sizeChange must be false', 60 | 'config.toolBoxOverflow': 'Allow tool box out of picture range', 61 | 'config.previewMode': 'Return results at any time', 62 | 'config.WatermarkText': 'Watermark text', 63 | 'config.WatermarkTextFont': 'Watermark size', 64 | 'config.WatermarkTextColor': 'Watermark color', 65 | 'config.WatermarkTextX': 'Watermark position x', 66 | 'config.WatermarkTextY': 'Watermark position Y', 67 | 'config.quality': 'Quality', 68 | 'config.accept': 'Accept file type', 69 | 'config.modalTitle': 'Modal title', 70 | }; 71 | -------------------------------------------------------------------------------- /src/i18n/lang/zh-CN.js: -------------------------------------------------------------------------------- 1 | export default { 2 | 'introduce.docs': '文档', 3 | 'introduce.gitee': 'Gitee', 4 | 'introduce.github': 'Github', 5 | 'introduce.npm': 'Npm', 6 | 'introduce.download': '下载', 7 | 'introduce.homepage': '作者主页', 8 | 'banner.download': '下载压缩包', 9 | 'banner.description': 10 | '简单易用的vue图片裁剪插件，支持移动图像，裁剪图片，放大缩小图片，上下左右移动，固定比例，固定尺寸，远程图片裁剪', 11 | 'block1.title1': '使用简单', 12 | 'block1.title2': '方便快捷', 13 | 'block1.title3': '只需以下几个步骤', 14 | 'block1.title4': '安装', 15 | 'block1.title5': '引入', 16 | 'block1.title6': '注册组件', 17 | 'block1.title7': '编写代码', 18 | 'block1.title8': '处理返回结果', 19 | 'block2.title1': '在线配置', 20 | 'block2.title2': '预览并生成代码', 21 | 'block2.title3': '使用此工具配置并生成代码', 22 | // 预览区域 23 | 'block3.title1': '远程图片地址', 24 | 'block3.title2': '选择本地图片', 25 | 'block3.title3': '裁剪远程图片', 26 | 'block3.title4': '裁剪远程图片', 27 | 'block3.title5': '确定', 28 | 'block3.title6': '重置', 29 | 'block3.title7': '下载图片', 30 | 'block3.title8': '预览区域', 31 | 'block3.title9': '选择本地图片', 32 | 'block3.title10': '图片裁剪', 33 | // 捐赠 34 | 'donation.title1': '捐赠', 35 | 'donation.title2': '捐赠以支持作者', 36 | 'donation.title3': '请我喝杯咖啡吧 :)', 37 | // 设置项 38 | 'config.title': '配置工具', 39 | 'config.label': '按钮文字', 40 | 'config.boxWidth': '裁剪组件宽度', 41 | 'config.boxHeight': '裁剪组件高度', 42 | 'config.cutWidth': '选择框宽度', 43 | 'config.cutHeight': '选择框高度', 44 | 'config.rate': '宽高比', 45 | 'config.toolBgc': '工具栏背景色', 46 | 'config.crossOriginHeader': '跨域header头', 47 | 'config.crossOrigin': '是否跨域', 48 | 'config.isModal': '是否为弹窗', 49 | 'config.showChooseBtn': '显示选择图片按钮', 50 | 'config.lockScroll': '锁定滚动', 51 | 'config.sizeChange': '允许改变大小', 52 | 'config.moveAble': '允许拖动裁剪框', 53 | 'config.tool': '显示工具栏', 54 | 'config.originalGraph': '原图裁剪', 55 | 'config.saveCutPosition': '保存裁剪框位置', 56 | 'config.scaleAble': '允许缩放图片', 57 | 'config.imgMove': '允许移动图片', 58 | 'config.fileType': '返回文件类型', 59 | 'config.index': '随结果一起返回，用于区分是那个裁剪组件返回的', 60 | 'config.smallToUpload': '如果选择的图片尺寸小于裁剪框尺寸，直接返回结果。 sizeChange必须为false', 61 | 'config.toolBoxOverflow': '允许裁剪框超出图片边界', 62 | 'config.previewMode': '实时返回裁剪结果', 63 | 'config.WatermarkText': '水印文字', 64 | 'config.WatermarkTextFont': '水印文字样式', 65 | 'config.WatermarkTextColor': '水印文字颜色', 66 | 'config.WatermarkTextX': '水印x轴位置', 67 | 'config.WatermarkTextY': '水印y轴位置', 68 | 'config.quality': '图片质量', 69 | 'config.accept': '可选文件类型', 70 | 'config.modalTitle': '弹窗标题', 71 | }; 72 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import ImgCutter from '../src/components/ImgCutter.vue'; 2 | export default ImgCutter; 3 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | import i18n from './i18n/index.js'; 4 | import { useI18n } from 'vue-i18n'; 5 | 6 | const app = createApp(App); 7 | app.use(i18n); 8 | app.mount('#app'); 9 | app.config.globalProperties.$t = useI18n; 10 | app.config.globalProperties.i18n = i18n; 11 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acccccccb/vue-img-cutter/5772bde09d5c674874bdb3fa7b6ab58eb187b39b/static/.gitkeep -------------------------------------------------------------------------------- /static/image/eg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acccccccb/vue-img-cutter/5772bde09d5c674874bdb3fa7b6ab58eb187b39b/static/image/eg.png -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: '', 3 | }; 4 | --------------------------------------------------------------------------------