Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

百度小程序bug兼容 #31

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

百度小程序bug兼容 #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3a79301
百度小程序bug兼容
xiao252 Jun 7, 2022
13cf8fc
类型
xiao252 Jun 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 18 additions & 9 deletions src/components/taro-cropper/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,12 +245,17 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
const cropperImageWidth = this.cropperWidth / drawWidth * imageWidth;
const cropperImageHeight = this.cropperHeight / drawHeight * imageHeight;
// 绘制裁剪框内裁剪的图片
// @ts-ignore
this.cropperCanvasContext.drawImage(src, cropperImageX, cropperImageY, cropperImageWidth, cropperImageHeight,
cropperStartX, cropperStartY, this.cropperWidth, this.cropperHeight);
// @ts-ignore
this.cropperCutCanvasContext.drawImage(src, cropperImageX, cropperImageY, cropperImageWidth, cropperImageHeight,
0, 0, this.cropperWidth, this.cropperHeight);
if (process.env.TARO_ENV == 'swan') {
// @ts-ignore
this.cropperCanvasContext.drawImage(src, cropperStartX, cropperStartY, this.cropperWidth, this.cropperHeight, cropperImageX, cropperImageY, cropperImageWidth, cropperImageHeight);
// @ts-ignore
this.cropperCutCanvasContext.drawImage(src, 0, 0, this.cropperWidth, this.cropperHeight, cropperImageX, cropperImageY, cropperImageWidth, cropperImageHeight);
}else{
// @ts-ignore
this.cropperCanvasContext.drawImage(src, cropperImageX, cropperImageY, cropperImageWidth, cropperImageHeight, cropperStartX, cropperStartY, this.cropperWidth, this.cropperHeight);
// @ts-ignore
this.cropperCutCanvasContext.drawImage(src, cropperImageX, cropperImageY, cropperImageWidth, cropperImageHeight, 0, 0, this.cropperWidth, this.cropperHeight);
}
}

update() {
Expand All @@ -263,9 +268,13 @@ class TaroCropperComponent extends Taro.PureComponent<TaroCropperComponentProps,
const src = process.env.TARO_ENV === 'h5' ? this.image : this.imageInfo.path;


// @ts-ignore
this.cropperCanvasContext.drawImage(src, 0, 0, this.imageInfo.width, this.imageInfo.height,
this.imageLeft, this.imageTop, this.scaleImageWidth, this.scaleImageHeight);
if (process.env.TARO_ENV == 'swan') {
// @ts-ignore
this.cropperCanvasContext.drawImage(src, this.imageLeft, this.imageTop, this.scaleImageWidth, this.scaleImageHeight, 0, 0, this.imageInfo.width, this.imageInfo.height);
}else{
// @ts-ignore
this.cropperCanvasContext.drawImage(src, 0, 0, this.imageInfo.width, this.imageInfo.height, this.imageLeft, this.imageTop, this.scaleImageWidth, this.scaleImageHeight);
}
// 绘制半透明层
this.cropperCanvasContext.beginPath();
easySetFillStyle(this.systemInfo, this.cropperCanvasContext, 'rgba(0, 0, 0, 0.3)');
Expand Down
1 change: 1 addition & 0 deletions types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export {default as TaroCropper} from './taro-cropper';
31 changes: 31 additions & 0 deletions types/taro-cropper.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import {ComponentClass} from "react";

export interface TaroCropperComponentProps {
type?: 'circle' | 'rect', // 遮罩形状（与实际裁剪无关，例：正圆遮罩实际裁剪出的图片是正方形）
maskColor?:string, // 遮罩颜色
isSideLine?:boolean, // 是否显示边框
cropperCanvasId: string, // 画布id
cropperCutCanvasId: string, // 用于裁剪的canvas id
width: number, // 组件宽度
height: number, // 组件高度 (要求背景高度大于宽度)
cropperWidth: number, // 裁剪框宽度
cropperHeight: number, // 裁剪框高度
themeColor: string, // 主题色（裁剪框的四个角的绘制颜色）
maxScale: number, // 最大放大倍数，maxScale >= 1
fullScreen: boolean, // 组件充满全屏，此时width和height设置无效
fullScreenCss: boolean,
src: string, // 要裁剪的图片路径,
onCut: (src: string) => void, // 点击底部的完成按钮，执行裁剪，成功则触发该回调
onCancel: () => void, // 点击取消按钮回调
onFail: (err) => void, // 裁剪失败触发该回调
hideFinishText: boolean, // 隐藏完成按钮（可以自己实现，然后调用本实例的cut方法进行裁剪）
hideCancelText: boolean, // 隐藏取消按钮（默认为true）
finishText: string, // 完成按钮文字，默认为 '完成'
cancelText: string, // 取消按钮文字，默认为 '取消'
fileType: 'jpg' | 'png' | undefined, // 裁剪后导出的图片的格式，只支持 'jpg' 或 'png'。默认为 'jpg'
quality: number, // 导出图片的质量，取值为 0 ~ 1，默认为1
}

declare const TaroCropper: ComponentClass<TaroCropperComponentProps>;

export default TaroCropper;