更新记录

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版本正式发布!

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.99,Android:5.0,iOS:不支持 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

插件使用

注意事项

  • 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文件

    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个人中心

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问