uview-pro 0.0.1

package/components/u-avatar-cropper/u-avatar-cropper.vue

@@ -0,0 +1,329 @@
+<template>
+    <view class="content">
+        <view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
+            <canvas
+                class="cropper"
+                :disable-scroll="true"
+                @touchstart="touchStart"
+                @touchmove="touchMove"
+                @touchend="touchEnd"
+                :style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
+                canvas-id="cropper"
+                id="cropper"
+            ></canvas>
+            <canvas
+                class="cropper"
+                :disable-scroll="true"
+                :style="{
+                    position: 'fixed',
+                    top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
+                    left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
+                    width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
+                    height: `${cropperOpt.height * cropperOpt.pixelRatio}`
+                }"
+                canvas-id="targetId"
+                id="targetId"
+            ></canvas>
+        </view>
+        <view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
+            <!-- #ifdef H5 -->
+            <view class="upload" @tap="uploadTap">选择图片</view>
+            <!-- #endif -->
+            <!-- #ifndef H5 -->
+            <view class="upload" @tap="uploadTap">重新选择</view>
+            <!-- #endif -->
+            <view class="getCropperImage" @tap="() => getCropperImage(false)">确定</view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { $u } from '../..';
+// 兼容 UMD/ESM 导入 weCropper.js
+// @ts-ignore
+import WeCropper from './weCropper';
+
+defineOptions({ name: 'u-avatar-cropper' });
+
+/**
+ * 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
+ * mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
+ */
+const props = defineProps({
+    boundStyle: {
+        type: Object as () => {
+            lineWidth: number;
+            borderColor: string;
+            mask: string;
+        },
+        default: () => ({
+            lineWidth: 4,
+            borderColor: 'rgb(245, 245, 245)',
+            mask: 'rgba(0, 0, 0, 0.35)'
+        })
+    }
+    // // 裁剪框宽度，单位rpx
+    // rectWidth: {
+    //   type: [String, Number],
+    //   default: 400
+    // },
+    // // 裁剪框高度，单位rpx
+    // rectHeight: {
+    //   type: [String, Number],
+    //   default: 400
+    // },
+    // // 输出图片宽度，单位rpx
+    // destWidth: {
+    //   type: [String, Number],
+    //   default: 400
+    // },
+    // // 输出图片高度，单位rpx
+    // destHeight: {
+    //   type: [String, Number],
+    //   default: 400
+    // },
+    // // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可
+    // fileType: {
+    //   type: String,
+    //   default: 'jpg',
+    // },
+    // // 生成的图片质量
+    // // H5上无效，目前不考虑使用此参数
+    // quality: {
+    //   type: [Number, String],
+    //   default: 1
+    // }
+});
+
+/**
+ * 组合式API变量声明
+ * 保留所有说明注释
+ */
+const bottomNavHeight = ref(50); // 底部导航的高度
+const originWidth = ref(200);
+const width = ref(0);
+const height = ref(0);
+const src = ref(''); // 选择的图片路径，用于在点击确定时，判断是否选择了图片
+const destWidth = ref(200); // 输出图片宽度，单位px
+const rectWidth = ref(200); // 裁剪框宽度，单位px
+const fileType = ref('jpg'); // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
+
+// cropperOpt 需响应式，且类型安全
+const cropperOpt = reactive({
+    id: 'cropper',
+    targetId: 'targetCropper',
+    pixelRatio: 1,
+    width: 0,
+    height: 0,
+    scale: 2.5,
+    zoom: 8,
+    cut: {
+        x: 0,
+        y: 0,
+        width: originWidth.value,
+        height: originWidth.value
+    },
+    boundStyle: {
+        lineWidth: 0,
+        mask: '',
+        color: ''
+    }
+});
+
+let cropper: any = null; // WeCropper 实例，类型 any，建议后续补充类型声明
+
+/**
+ * 组件挂载时初始化 cropper
+ * 保留所有说明注释
+ */
+onMounted(() => {
+    // 获取系统信息
+    const rectInfo = uni.getSystemInfoSync();
+    width.value = rectInfo.windowWidth;
+    height.value = rectInfo.windowHeight - bottomNavHeight.value;
+    cropperOpt.width = width.value;
+    cropperOpt.height = height.value;
+    cropperOpt.pixelRatio = rectInfo.pixelRatio;
+
+    // 初始化裁剪框
+    cropperOpt.cut = {
+        x: (width.value - originWidth.value) / 2,
+        y: (height.value - originWidth.value) / 2,
+        width: originWidth.value,
+        height: originWidth.value
+    };
+    cropperOpt.boundStyle = {
+        lineWidth: uni.upx2px(props.boundStyle.lineWidth),
+        mask: props.boundStyle.mask,
+        color: props.boundStyle.borderColor
+    };
+
+    // 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
+    uni.setNavigationBarColor({
+        frontColor: '#ffffff',
+        backgroundColor: '#000000'
+    });
+
+    // 初始化 cropper 实例
+    cropper = new WeCropper(cropperOpt)
+        .on('ready', (ctx: any) => {
+            // wecropper is ready for work!
+        })
+        .on('beforeImageLoad', (ctx: any) => {
+            // before picture loaded, i can do something
+        })
+        .on('imageLoad', (ctx: any) => {
+            // picture loaded
+        })
+        .on('beforeDraw', (ctx: any, instance: any) => {
+            // before canvas draw,i can do something
+        });
+
+    // 选择图片
+    uni.chooseImage({
+        count: 1, // 默认9
+        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
+        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+        success: (res: UniApp.ChooseImageSuccessCallbackResult) => {
+            src.value = res.tempFilePaths[0];
+            //  获取裁剪图片资源后，给data添加src属性及其值
+            cropper.pushOrign(src.value);
+        }
+    });
+});
+
+/**
+ * 触摸开始事件
+ * @param e 事件对象
+ */
+function touchStart(e: any) {
+    cropper && cropper.touchStart(e);
+}
+
+/**
+ * 触摸移动事件
+ * @param e 事件对象
+ */
+function touchMove(e: any) {
+    cropper && cropper.touchMove(e);
+}
+
+/**
+ * 触摸结束事件
+ * @param e 事件对象
+ */
+function touchEnd(e: any) {
+    cropper && cropper.touchEnd(e);
+}
+
+/**
+ * 获取裁剪后的图片
+ * @param isPre 是否预览
+ */
+function getCropperImage(isPre = false) {
+    if (!src.value) return $u.toast('请先选择图片再裁剪');
+
+    const cropper_opt = {
+        destHeight: Number(destWidth.value), // uni.canvasToTempFilePath要求这些参数为数值
+        destWidth: Number(destWidth.value),
+        fileType: fileType.value
+    };
+    cropper.getCropperImage(cropper_opt, (path: string, err: any) => {
+        if (err) {
+            uni.showModal({
+                title: '温馨提示',
+                content: err.message
+            });
+        } else {
+            if (isPre) {
+                uni.previewImage({
+                    current: '', // 当前显示图片的 http 链接
+                    urls: [path] // 需要预览的图片 http 链接列表
+                });
+            } else {
+                uni.$emit('uAvatarCropper', path);
+                $u.route({
+                    type: 'back'
+                });
+            }
+        }
+    });
+}
+
+/**
+ * 重新选择图片
+ */
+function uploadTap() {
+    uni.chooseImage({
+        count: 1, // 默认9
+        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+        success: (res: UniApp.ChooseImageSuccessCallbackResult) => {
+            src.value = res.tempFilePaths[0];
+            //  获取裁剪图片资源后，给data添加src属性及其值
+            cropper.pushOrign(src.value);
+        }
+    });
+}
+</script>
+
+<style scoped lang="scss">
+@import '../../libs/css/style.components.scss';
+
+.content {
+    background: rgba(255, 255, 255, 1);
+}
+
+.cropper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 11;
+}
+
+.cropper-buttons {
+    background-color: #000000;
+    color: #eee;
+}
+
+.cropper-wrapper {
+    position: relative;
+    @include vue-flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    background-color: #000;
+}
+
+.cropper-buttons {
+    width: 100vw;
+    @include vue-flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    font-size: 28rpx;
+}
+
+.cropper-buttons .upload,
+.cropper-buttons .getCropperImage {
+    width: 50%;
+    text-align: center;
+}
+
+.cropper-buttons .upload {
+    text-align: left;
+    padding-left: 50rpx;
+}
+
+.cropper-buttons .getCropperImage {
+    text-align: right;
+    padding-right: 50rpx;
+}
+</style>

package/components/u-avatar-cropper/weCropper.d.ts

@@ -0,0 +1,54 @@
+/**
+ * we-cropper 类型声明文件
+ * 适用于 Vue3 + TypeScript 项目中 weCropper.js 的类型提示
+ */
+
+export interface WeCropperOptions {
+  id?: string;
+  targetId?: string;
+  pixelRatio?: number;
+  width?: number;
+  height?: number;
+  scale?: number;
+  zoom?: number;
+  cut?: {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+  };
+  boundStyle?: {
+    lineWidth?: number;
+    borderColor?: string;
+    mask?: string;
+    color?: string;
+  };
+  [key: string]: any;
+}
+
+export type WeCropperEvent = (ctx: any, instance?: any) => void;
+
+export interface WeCropperInstance {
+  pushOrign(src: string): Promise<void>;
+  pushOrigin(src: string): Promise<void>;
+  removeImage(): Promise<void>;
+  getCropperBase64(done?: (base64: string) => void): void;
+  getCropperImage(opt: any, fn: (path: string, err: any) => void): void;
+  update(): void;
+  touchStart(e: any): void;
+  touchMove(e: any): void;
+  touchEnd(e: any): void;
+  on(event: 'ready' | 'beforeImageLoad' | 'imageLoad' | 'beforeDraw', fn: WeCropperEvent): WeCropperInstance;
+  // 其它动态方法
+  [key: string]: any;
+}
+
+/**
+ * weCropper 构造函数类型
+ */
+declare const WeCropper: {
+  new (options: WeCropperOptions): WeCropperInstance;
+  (options: WeCropperOptions): WeCropperInstance;
+};
+
+export default WeCropper;