更新记录

1.0.2（2024-05-30）

更新依赖库

1.0.1（2024-05-26）

Api错误消息请看interface.uts中的PersonalPortraitCropErrorCode

1.0.0（2024-05-25）

citycoder-personalportrait，一个出色的个人中心图片裁剪框架，1.0.0版本正式发布！

平台兼容性

插件使用

注意事项

• 1.HBuilderX设置->插件配置->uts开发扩展ndroid中gradle版本（若配置过）不能高于7.6.1
• 2.项目根目录manifest.json-App常用其他配置-targetSdkVerson需配置为大于等于33（由于官方目前不支持配置compileSdkVersion，这里升高targetSdkVersion后，App需要适配高版本Sdk）
• 3.导入插件后，需自定义基座后再使用
• 4.HBuilderX版本4.02及以上时，需删除插件app-android目录AndroidManifest.xml文件中的package字段，或者直接删除AndroidManifest.xml文件
• 5.插件仅适配android uniapp项目，不支持iOS，还未在uniappx中测试

  AndroidManifest.xml文件

  <!--app-android AndroidManifest.xml文件 -->
  <?xml version="1.0" encoding="utf-8"?>
  <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
  package="com.ccxxcoder.uniapp.personalportrait">
  </manifest>

亮点

• 1.自动处理Android Camera、Storage权限（符合应用市场对隐私弹窗的样式要求），使用者无需处理权限
• 2.本地图片裁剪
• 3.拍照图片裁剪
• 4.适合个人中心图片更新

使用

示例

<template>
    <view class="content">
        <image class="logo" :src="iconPath"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view class="buttonWrap">
            <button class="buttonItem buttonItemTopMargin" type="primary" @click="jumpToImageCropPage">
                图片裁剪
            </button>
        </view>
    </view>
</template>

<script>
    import {
        personalPortraitCropApi
    } from "@/uni_modules/citycoder-personalportrait";
    export default {
        onLoad() {

        },
        data() {
            return {
                title: 'Hello',
                iconPath: '/static/logo.png',
                videoPath: '',
                mediaPageStyle: {
                    // 公共样式配置
                    "commonPageStyle": {
                        // 页面主色
                        "pagePrimaryColor": "#1D1D20",
                        // 页面次色
                        "pageSecondaryColor": "#000000",
                        // 左方向箭头路径
                        "leftArrowPath": "",
                        // 对左方向箭头着色（颜色会覆盖图片）
                        "leftArrowTintColor": "#FFFFFF",
                        // 右方向箭头路径
                        "rightArrowPath": "",
                        // 对右方向箭头着色（颜色会覆盖图片）
                        "rightArrowTintColor": "#D8D8D8",
                        // 占位组件的颜色
                        "placeholderColor": "#EFEFEF",
                        // 按钮组件主色
                        "buttonPrimaryColor": "#FF4700",
                        // 按钮组件次色
                        "buttonSecondaryColor": "#47474D",
                        // 按钮组件圆角大小
                        "buttonRadius": 8,
                        // 选择组件主色
                        "checkedPrimaryColor": "#FF4700",
                        // 选择组件次色
                        "checkedSecondaryColor": "#FFFFFF",
                        // 文本组件主色
                        "textPrimaryColor": "#FFFFFF",
                        // 文本组件次色
                        "textSecondaryColor": "#60FFFFFF",
                        // 文本组件第三色
                        "textTertiaryColor": "#30FFFFFF"
                    },
                    // 对话框样式配置
                    "dialogStyle": {
                        // 警告对话框位置，位置，0：顶部，1：中间，2：底部，默认值：2
                        "alertDlgPosition": 2,
                        // 警告对话框背景颜色
                        "alertDlgBackgroundColor": "#FF2A2A2E",
                        // 警告对话框标题颜色
                        "alertDlgTitleColor": "#FFFFFF",
                        // 警告对话框分割线颜色
                        "alertDlgDividerColor": "#10FFFFFF",
                        // 警告对话框消息颜色
                        "alertDlgMessageColor": "#80FFFFFF",
                        // 警告对话框确定按钮文本颜色
                        "alertDlgSureTextColor": "#FF4700",
                        // 列表对话框背景颜色
                        "listDlgBackgroundColor": "#FF2A2A2E",
                        // 列表对话框分割线颜色
                        "listDlgDividerColor": "#10FFFFFF",
                        // 列表对话框每行item的文本颜色
                        "listDlgItemTitleColor": "#FFFFFF"
                    },
                    // 权限申请对话框样式
                    "permissionAdaptStyle": {
                        // 对话框，位置，0：顶部，1：中间，2：底部，默认值 2
                        "dialogPosition": 2,
                        // 进入App设置页面对话框标题
                        "settingsTitle": "权限设置提示",
                        // 进入App设置页面对话框取消按钮
                        "settingsCancelText": "取消",
                        // 进入App设置页面对话框确认按钮
                        "settingsSureText": "进入设置",
                        // 初次申请相机权限对话框标题
                        "cameraRequestTitle": "开启相机权限",
                        // 初次申请相机权限对话框消息
                        "cameraRequestMessage": "为了支持拍照上传图片，我们将征求你的同意来获取相机权限",
                        // 初次申请相机权限对话框确认按钮
                        "cameraRequestSureText": "我知道了",
                        // 相机权限拒绝时，给出解释对话框标题
                        "cameraExplainTitle": "App需要获取相机权限才能拍摄照片，否则部分功能无法正常使用",
                        // 相机权限拒绝时，给出解释对话框取消按钮
                        "cameraExplainCancelText": "取消",
                        // 相机权限拒绝时，给出解释对话框确认按钮
                        "cameraExplainSureText": "授权",
                        // 进入App设置页面对话框确消息 
                        "cameraSettingsMessage": "相机权限被拒绝，为了不影响您的正常使用，请在权限设置中开启对应权限",
                        // 初次申请存储权限对话框标题
                        "storageRequestTitle": "开启存储空间权限",
                        // 初次申请存储权限对话框消息
                        "storageRequestMessage": "为了您能下载文件、上传头像或图片、保存图片，我们将征求你的同意来获取存储空间权限",
                        // 初次申请存储权限对话框确认按钮
                        "storageRequestSureText": "我知道了",
                        // 存储权限拒绝时，给出解释对话框标题
                        "storageExplainTitle": "App需要获取存储权限才能显示图片，否则部分功能无法正常使用",
                        // 存储权限拒绝时，给出解释对话框取消按钮
                        "storageExplainCancelText": "取消",
                        // 存储权限拒绝时，给出解释对话框确认按钮
                        "storageExplainSureText": "授权",
                        // 进入App设置页面对话框确消息 
                        "storageSettingsMessage": "存储权限被拒绝，为了不影响您的正常使用，请在权限设置中开启对应权限"
                    },
                    // 拍照+图片列表样式配置
                    "personalPortraitPageStyle": {
                        // 相机图片路径
                        "cameraItemIconPath": "",
                        // 对相机图片着色（颜色会覆盖图片）
                        "cameraItemIconTintColor": "#8A8A8A",
                        // 相机图片文本
                        "cameraItemTitle": "拍摄照片",
                        // 风格（支付宝、微信等主流风格），//-1 无， 0 弹窗，1 内嵌，2 弹窗 + 内嵌；默认值：-1
                        "cameraStyle": -1,
                        // cameraStyle 为0或2时才有意义，列表弹窗中相册item标题
                        "listDlgAlbumItemTitle": "从相册选一张",
                        // cameraStyle 为0或2时才有意义，列表弹窗中相机item标题
                        "listDlgCameraItemTitle": "拍一张照片",
                        // cameraStyle 为0或2时才有意义，列表弹窗中取消item标题
                        "listDlgCancelItemTitle": "取消"
                    },
                    // 相册页面样式配置
                    "albumPageStyle": {
                        // 标题栏左侧文字
                        "leadingTitle": "取消",
                        // 标题
                        "title": "手机相册"
                    },
                    // 图片选择器页面样式配置
                    "imageSelectorPageStyle": {
                        // 标题
                        "title": "所有图片",
                        // 标题栏右侧文字
                        "trailingTitle": "相册",
                        // loading组件，对loading组件中的loading、empty、failure图片着色（颜色会覆盖图片）
                        "loadingTintColor": "#FFFFFF",
                        // loading组件，loading图片地址
                        "loadingIconPath": "",
                        // loading组件，loading提示文本
                        "loadingText": "加载中...",
                        // loading组件，加载结果为空时图片地址
                        "loadingEmptyIconPath": "",
                        // loading组件，加载结果为空时文本
                        "loadingEmptyText": "暂无图片",
                        // loading组件，加载结果失败时图片地址
                        "loadingFailureIconPath": "",
                        // loading组件，加载结果失败时文本
                        "loadingFailureText": "图片加载失败",
                        // 多选模式时，最多选多少张图片对话框标题
                        "maxSelectedCountDlgTitle": "你最多只能选择%d张图片",
                        // 多选模式时，最多选多少张图片对话框确认按钮文本
                        "maxSelectedCountDlgSureText": "知道了",
                        // 底部操作栏，预览按钮文本
                        "previewActionText": "预览",
                        // 底部操作栏，完成按钮文本
                        "completeActionText": "完成"
                    },
                    // 图片预览页面样式配置
                    "imagePreviewPageStyle": {
                        // 是否显示标题
                        "showTitle": true,
                        // 预览组件背景色
                        "previewBackgroundColor": "#FF000000",
                        // 预览列表背景色
                        "previewListMaskColor": "#801D1D20",
                        // 底部操作栏，完成按钮文本
                        "completeActionText": "完成",
                    },
                    // 图片裁剪页面样式配置
                    "imageCropPageStyle": {
                        // 标题栏左侧文字
                        "leadingTitle": "取消",
                        // 标题栏右侧文字
                        "trailingTitle": "完成",
                        // 裁剪框外部（目前上部分+下部分）颜色
                        "borderSideColor": "#FF000000",
                        // 裁剪框边框颜色
                        "borderStrokeColor": "#FFFFFFFF",
                        // 裁剪框内部（覆盖图片层）颜色
                        "borderSolidMaskColor": "#AA000000",
                        // 裁剪失败时，弹出的警告对话框标题
                        "cropFailureDlgTitle": "错误提示",
                        // 裁剪失败时，弹出的警告对话框消息
                        "cropFailureDlgMessage": "图片裁剪失败",
                        // 裁剪失败时，弹出的警告对话确定按钮文本
                        "cropFailureDlgSureText": "知道了"
                    }
                }
            }
        },
        methods: {
            jumpToImageCropPage() {
                let _that = this
                personalPortraitCropApi({
                    pageStyle: _that.mediaPageStyle,
                    cameraStyle: 2,
                    success: (res) => {
                        console.log("Page. " + res)
                        _that.iconPath = res
                    },
                    failure: (res) => {
                        console.log("Page failure. " + res.errCode + "，错误消息：" + res.errMsg)
                    }
                })
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 16rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
        border-radius: 50%;
    }

    .video {
        height: 108rpx;
        width: 192rpx;
        margin-top: 16rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }

    .buttonWrap {
        display: flexbox;
        width: 100%;
        padding: 0 16px;
    }

    .buttonItem {
        position: relative;
        display: block;
        margin-left: 16px;
        margin-right: 16px;
        padding-left: 14px;
        padding-right: 14px;
        box-sizing: border-box;
        font-size: 18px;
        text-align: center;
        text-decoration: none;
        line-height: 2.55555556;
        border-radius: 5px;
        -webkit-tap-highlight-color: transparent;
        overflow: hidden;
        color: #000;
        background-color: #f8f8f8;
        cursor: pointer;
    }

    .buttonItemTopMargin {
        margin-top: 16px;
    }
</style>

Api介绍

• 1.personalPortraitCropApi 图片裁剪Api

Error Api介绍

错误码、错误消息详见插件的unierror.uts、interface.uts中的PersonalPortraitCropErrorCode

样式定制

样式Api可看插件的interface.uts中的注释

• 1.pageStyle配置媒体选择器页面样式

图片

部分样式支持传图片，支持本地static目录中的图片、网络图片（http开头） 例：

commonPageStyle: {
  leftArrowPath:"/static/logo.png",
  // leftArrowPath:"http://www.......",
  // leftArrowPath:"https://www.......",
}

个人博客

CSDN

DCloud个人中心