Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
acccccccb committed Jul 27, 2022
1 parent bf55034 commit 7d4c5ad
Show file tree
Hide file tree
Showing 10 changed files with 12,470 additions and 12,133 deletions.
11 changes: 11 additions & 0 deletions README-zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ forIe9:function(){
| index | 自定义参数,将会同结果一起返回 | Any || null |
| previewMode | 裁剪过程中是否返回裁剪结果,如果裁剪出现卡顿时将此项设置为 false | Boolean || true |
| fileType | 返回的文件类型 ( png / jpeg / webp) | String || png |
| quality | 图像质量 | Number | No | 1 |

> 支持 slot,在组件内部使用带有 slot="open"属性的元素即可自定义打开组件的按钮
Expand Down Expand Up @@ -198,6 +199,16 @@ forIe9:function(){

---

#### 3.0.2

- bugfix:[#note_11139264](https://gitee.com/GLUESTICK/vue-img-cutter#note_11139264)

- bugfix:[#64](https://github.com/acccccccb/vue-img-cutter/issues/64)

- 新增参数(quality): 裁剪图片质量,0 到 1 之间,默认 1

---

#### 3.0.1

- bugfix:[#I4SDOE](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I4SDOE)
Expand Down
9 changes: 9 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ ForIE9:function(){
| 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 |
| quality | image quality | Number | No | 1 |

### Hook function:

Expand Down Expand Up @@ -195,6 +196,14 @@ ForIE9:function(){

### Update log:

#### 3.0.2

- bugfix:[#note_11139264](https://gitee.com/GLUESTICK/vue-img-cutter#note_11139264)

- bugfix:[#64](https://github.com/acccccccb/vue-img-cutter/issues/64)

- New prop( quality ) : A Number between 0 and 1 indicating the image quality

#### 3.0.1

- bugfix:[#I4SDOE](https://gitee.com/GLUESTICK/vue-img-cutter/issues/I4SDOE)
Expand Down
24,164 changes: 12,125 additions & 12,039 deletions package-lock.json

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-img-cutter",
"version": "3.0.1",
"version": "3.0.2",
"description": "A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size",
"author": "acccccccb <[email protected]>",
"private": false,
Expand All @@ -11,7 +11,8 @@
},
"dependencies": {
"core-js": "^3.20.3",
"vue": "^3.2.29"
"vue": "^3.2.29",
"vue-i18n": "^9.1.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.15",
Expand Down
217 changes: 139 additions & 78 deletions src/App.vue

Large diffs are not rendered by default.

43 changes: 30 additions & 13 deletions src/components/ImgCutter.vue
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
<slot name="flipHorizontal"> ⇆ </slot>
</div>
<div v-if="originalGraph === false" @click="flipVertically" class="dockBtn">
<slot name="turnRight"> ⇅ </slot>
<slot name="flipVertically"> ⇅ </slot>
</div>
</div>
<!--裁剪区域-->
Expand Down Expand Up @@ -437,6 +437,12 @@
default: false,
required: false,
},
// 裁剪后的图片质量
quality: {
type: Number,
default: 1,
required: false,
},
},
model: ['label', 'boxWidth', 'boxHeight', 'rate', 'tool', 'DoNotDisplayCopyright'],
data() {
Expand Down Expand Up @@ -1397,7 +1403,7 @@
if (this.crossOrigin === true) {
tempImg.crossOrigin = this.crossOriginHeader;
}
tempImg.src = canvas.toDataURL(`image/${this.fileType}`);
tempImg.src = canvas.toDataURL(`image/${this.fileType}`, _this.quality);
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
Expand Down Expand Up @@ -1548,10 +1554,13 @@
fileName,
blob: newBlob,
file: _this.dataURLtoFile(
newCanv.toDataURL(`image/${_this.fileType}`),
newCanv.toDataURL(`image/${_this.fileType}`, _this.quality),
fileName
),
dataURL: newCanv.toDataURL(`image/${_this.fileType}`),
dataURL: newCanv.toDataURL(
`image/${_this.fileType}`,
_this.quality
),
});
} else {
if (_this.previewMode) {
Expand All @@ -1560,16 +1569,22 @@
fileName,
blob: newBlob,
file: _this.dataURLtoFile(
newCanv.toDataURL(`image/${_this.fileType}`),
newCanv.toDataURL(
`image/${_this.fileType}`,
_this.quality
),
fileName
),
dataURL: newCanv.toDataURL(`image/${_this.fileType}`),
dataURL: newCanv.toDataURL(
`image/${_this.fileType}`,
_this.quality
),
});
}
}
},
`image/${_this.fileType}`,
0.95
_this.quality
);
}
}, 200);
Expand Down Expand Up @@ -1617,17 +1632,18 @@
_this.handleClose();
_this.$emit('cutDown', {
fileName,
dataURL: newCanv.toDataURL(`image/${_this.fileType}`),
dataURL: newCanv.toDataURL(`image/${_this.fileType}`, _this.quality),
});
} else {
_this.$emit('onPrintImg', {
fileName,
dataURL: newCanv.toDataURL(`image/${_this.fileType}`),
dataURL: newCanv.toDataURL(`image/${_this.fileType}`, _this.quality),
});
}
}
}),
`image/${_this.fileType}`;
`image/${_this.fileType}`,
_this.quality;
} else {
if (!doNotReset) {
console.warn('No picture selected');
Expand Down Expand Up @@ -2328,13 +2344,14 @@
position: absolute;
cursor: pointer;
background: rgba(0, 0, 0, 0.7);
padding: 2px;
color: #fff;
top: -16px;
height: 14px;
line-height: 14px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 10px;
white-space: nowrap;
min-width: 50px;
border-radius: 3px;
transform: translate(-50%, -50%);
}
Expand Down
11 changes: 11 additions & 0 deletions src/i18n/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { createI18n } from 'vue-i18n';
import zhCn from './lang/zh-CN.js';
import enUs from './lang/en-US.js';

export default createI18n({
locale: 'zh-CN',
messages: {
'en-US': enUs,
'zh-CN': zhCn,
},
});
67 changes: 67 additions & 0 deletions src/i18n/lang/en-US.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
export default {
'introduce.docs': 'Docs',
'introduce.gitee': 'Gitee',
'introduce.github': 'Github',
'introduce.npm': 'Npm',
'introduce.download': 'Download',
'introduce.homepage': 'Home page',
'banner.download': 'Download zip',
'banner.description': 'A image crop plug-in for Vue,you can use it to rotate、zoom images and cut any size',
'block1.title1': 'Easy to use',
'block1.title2': 'Increase of efficiency',
'block1.title3': 'You can use it in a few simple steps',
'block1.title4': 'Install',
'block1.title5': 'Import',
'block1.title6': 'Register',
'block1.title7': 'Code',
'block1.title8': 'Return',
'block2.title1': 'Online configuration',
'block2.title2': 'Preview and generate code',
'block2.title3': 'Use this tool to preview and generate code.',
// 预览区域
'block3.title1': 'Remote pictures src',
'block3.title2': 'Crop local pictures',
'block3.title3': 'Crop remote pictures',
'block3.title4': 'Crop remote pictures(For IE9)',
'block3.title5': 'Confirm',
'block3.title6': 'Reset',
'block3.title7': 'Download picture',
'block3.title8': 'Cut it out and show it here',
'block3.title9': 'Choose picture',
// 捐赠
'donation.title1': 'Donation',
'donation.title2': 'Donate in support of the author',
'donation.title3': 'Can you buy me a cup of coffee :)',
// 设置项
'config.title': 'Config tool',
'config.label': 'Button text',
'config.boxWidth': 'Tool width',
'config.boxHeight': 'Tool height',
'config.cutWidth': 'Selection box width',
'config.cutHeight': 'Selection box height',
'config.rate': 'Aspect ratio',
'config.toolBgc': 'Toolbar background color',
'config.crossOriginHeader': 'Cross origin header',
'config.crossOrigin': 'Is cross origin',
'config.isModal': 'Is modal',
'config.showChooseBtn': 'Show select button',
'config.lockScroll': 'Lock scroll',
'config.sizeChange': 'Allow to change size',
'config.moveAble': 'Allow to change size',
'config.tool': 'Show toolbar',
'config.originalGraph': 'Crop original image',
'config.saveCutPosition': 'Save cut position',
'config.scaleAble': 'Allow scale image',
'config.imgMove': 'Allow move image',
'config.fileType': 'Return file type',
'config.index': 'Return result with index',
'config.smallToUpload': 'If choose image size less then defined Size,return file. sizeChange must be false',
'config.toolBoxOverflow': 'Allow tool box out of picture range',
'config.previewMode': 'Return results at any time',
'config.WatermarkText': 'Watermark text',
'config.WatermarkTextFont': 'Watermark size',
'config.WatermarkTextColor': 'Watermark color',
'config.WatermarkTextX': 'Watermark position x',
'config.WatermarkTextY': 'Watermark position Y',
'config.quality': 'Quality',
};
68 changes: 68 additions & 0 deletions src/i18n/lang/zh-CN.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
export default {
'introduce.docs': '文档',
'introduce.gitee': 'Gitee',
'introduce.github': 'Github',
'introduce.npm': 'Npm',
'introduce.download': '下载',
'introduce.homepage': '作者主页',
'banner.download': '下载压缩包',
'banner.description':
'简单易用的vue图片裁剪插件,支持移动图像,裁剪图片,放大缩小图片,上下左右移动,固定比例,固定尺寸,远程图片裁剪',
'block1.title1': '使用简单',
'block1.title2': '方便快捷',
'block1.title3': '只需以下几个步骤',
'block1.title4': '安装',
'block1.title5': '引入',
'block1.title6': '注册组件',
'block1.title7': '编写代码',
'block1.title8': '处理返回结果',
'block2.title1': '在线配置',
'block2.title2': '预览并生成代码',
'block2.title3': '使用此工具配置并生成代码',
// 预览区域
'block3.title1': '远程图片地址',
'block3.title2': '选择本地图片',
'block3.title3': '裁剪远程图片',
'block3.title4': '裁剪远程图片',
'block3.title5': '确定',
'block3.title6': '重置',
'block3.title7': '下载图片',
'block3.title8': '预览区域',
'block3.title9': '选择本地图片',
// 捐赠
'donation.title1': '捐赠',
'donation.title2': '捐赠以支持作者',
'donation.title3': '请我喝杯咖啡吧 :)',
// 设置项
'config.title': '配置工具',
'config.label': '按钮文字',
'config.boxWidth': '裁剪组件宽度',
'config.boxHeight': '裁剪组件高度',
'config.cutWidth': '选择框宽度',
'config.cutHeight': '选择框高度',
'config.rate': '宽高比',
'config.toolBgc': '工具栏背景色',
'config.crossOriginHeader': '跨域header头',
'config.crossOrigin': '是否跨域',
'config.isModal': '是否为弹窗',
'config.showChooseBtn': '显示选择图片按钮',
'config.lockScroll': '锁定滚动',
'config.sizeChange': '允许改变大小',
'config.moveAble': '允许拖动图片',
'config.tool': '显示工具栏',
'config.originalGraph': '原图裁剪',
'config.saveCutPosition': '保存裁剪框位置',
'config.scaleAble': '允许缩放图片',
'config.imgMove': '允许移动图片',
'config.fileType': '返回文件类型',
'config.index': '随结果一起返回,用于区分是那个裁剪组件返回的',
'config.smallToUpload': '如果选择的图片尺寸小于裁剪框尺寸,直接返回结果。 sizeChange必须为false',
'config.toolBoxOverflow': '允许裁剪框超出图片边界',
'config.previewMode': '实时返回裁剪结果',
'config.WatermarkText': '水印文字',
'config.WatermarkTextFont': '水印文字样式',
'config.WatermarkTextColor': '水印文字颜色',
'config.WatermarkTextX': '水印x轴位置',
'config.WatermarkTextY': '水印y轴位置',
'config.quality': '图片质量',
};
8 changes: 7 additions & 1 deletion src/main.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n/index.js';
import { useI18n } from 'vue-i18n';

createApp(App).mount('#app');
const app = createApp(App);
app.use(i18n);
app.mount('#app');
app.config.globalProperties.$t = useI18n;
app.config.globalProperties.i18n = i18n;

0 comments on commit 7d4c5ad

Please sign in to comment.