1
0
mirror of https://github.com/SunnyQjm/taro-cropper.git synced 2026-06-05 15:39:32 +08:00

add: 支持设置导出文件的格式和质量

This commit is contained in:
2020-02-18 17:57:09 +08:00
parent b9687bcbed
commit ed3ec423f2
4 changed files with 17 additions and 6 deletions
+1
View File
@@ -4,3 +4,4 @@ deploy_versions/
.rn_temp/ .rn_temp/
node_modules/ node_modules/
.DS_Store .DS_Store
yarn.lock
+1 -1
View File
@@ -3,7 +3,7 @@
<option name="myName" value="Project Default" /> <option name="myName" value="Project Default" />
<inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true"> <inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
<Languages> <Languages>
<language minSize="54" name="TypeScript" /> <language minSize="65" name="TypeScript" />
</Languages> </Languages>
</inspection_tool> </inspection_tool>
<inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" /> <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
+2
View File
@@ -18,6 +18,8 @@ export interface TaroCropperComponentProps {
hideCancelText?: boolean, // 隐藏取消按钮(默认为true hideCancelText?: boolean, // 隐藏取消按钮(默认为true
finishText?: string, // 完成按钮文字,默认为 '完成' finishText?: string, // 完成按钮文字,默认为 '完成'
cancelText?: string, // 取消按钮文字,默认为 '取消' cancelText?: string, // 取消按钮文字,默认为 '取消'
fileType?: 'jpg' | 'png' | string, // 裁剪后导出的图片的格式,只支持 'jpg' 或 'png'。默认为 'jpg'
quality?: number, // 导出图片的质量,取值为 0 ~ 1,默认为1
} }
declare const TaroCropper: ComponentClass<TaroCropperComponentProps>; declare const TaroCropper: ComponentClass<TaroCropperComponentProps>;
+12 -4
View File
@@ -25,6 +25,8 @@ interface TaroCropperComponentProps {
hideCancelText: boolean, // 隐藏取消按钮(默认为true hideCancelText: boolean, // 隐藏取消按钮(默认为true
finishText: string, // 完成按钮文字,默认为 '完成' finishText: string, // 完成按钮文字,默认为 '完成'
cancelText: string, // 取消按钮文字,默认为 '取消' cancelText: string, // 取消按钮文字,默认为 '取消'
fileType: 'jpg' | 'png' | string, // 裁剪后导出的图片的格式,只支持 'jpg' 或 'png'。默认为 'jpg'
quality: number, // 导出图片的质量,取值为 0 ~ 1,默认为1
} }
interface TaroCropperComponentState { interface TaroCropperComponentState {
@@ -48,7 +50,10 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
hideCancelText: true, hideCancelText: true,
finishText: '完成', finishText: '完成',
cancelText: '取消', cancelText: '取消',
onCancel: () => {}, fileType: 'jpg',
quality: 1,
onCancel: () => {
},
onCut: () => { onCut: () => {
}, },
onFail: () => { onFail: () => {
@@ -432,9 +437,10 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
filePath: string, filePath: string,
}> { }> {
const { const {
cropperCutCanvasId cropperCutCanvasId,
fileType,
quality
} = this.props; } = this.props;
console.log(this.systemInfo.pixelRatio);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const scope = process.env.TARO_ENV === 'h5' ? this : this.$scope; const scope = process.env.TARO_ENV === 'h5' ? this : this.$scope;
Taro.canvasToTempFilePath({ Taro.canvasToTempFilePath({
@@ -445,6 +451,8 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
height: this.cropperHeight - 2, height: this.cropperHeight - 2,
destWidth: this.cropperWidth * this.systemInfo.pixelRatio, destWidth: this.cropperWidth * this.systemInfo.pixelRatio,
destHeight: this.cropperHeight * this.systemInfo.pixelRatio, destHeight: this.cropperHeight * this.systemInfo.pixelRatio,
fileType: fileType,
quality: quality,
success: res => { success: res => {
switch (process.env.TARO_ENV) { switch (process.env.TARO_ENV) {
case 'alipay': case 'alipay':
@@ -552,7 +560,7 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
// } // }
} }
if(!hideCancelText) { if (!hideCancelText) {
const cancelStyle: CSSProperties = { const cancelStyle: CSSProperties = {
position: 'absolute', position: 'absolute',
display: 'inline-block', display: 'inline-block',