Web SDK支持用户界面样式的自定义。您可以根据需要自定义引导页、证件采集页、OCR结果编辑页以及活体检测页的图标、按钮颜色、背景颜色等样式。
配置方法
根据配置模板，将自定义样式的JSON字符串，通过服务端的Initialize接口中的StyleConfig字段传给阿里云服务端初始化后使用。
不传对应配置则使用默认配置；不传对应配置项的样式则使用默认样式。为了减少初始化请求的大小，建议只传递需要修改的配置，其他配置项保持阿里云默认配置。
JSON字符串中不可含有正则表达式中的特殊字符。
配置模板
const styleConfig = {
guidePage: {
backgroundColor: "white", // css颜色值
btnBackgroundColor: "#fb5d01", // css颜色值
btnTextColor: "white", // css颜色值
btnShadow: "0 16px 32px 0 rgba(251, 115, 38, 0.3)", // css box-shadow
circle1Img: "", // 图片链接
circle2Img: "", // 图片链接
leftBorderImg: "", // 图片链接
faceImg: "", // 图片链接
ocrImg: "", // 图片链接
},
ocrPage: {
// ocr页面背景颜色及不透明度
ocrBgColor: "rgba(2, 2, 2, 0.8)", // css rgba
tipColor: "white", // css颜色值
maskColor: "rgba(2, 2, 2, 0.7)", // css rgba
backIconImg: "", // 图片链接
submitIconImg: "", // 图片链接
ocrPhotoBorderImg: "", // 图片链接
albumIconImg: "", // 图片链接
},
ocrResultPage: {
backgroundColor: "white", // css颜色值
topTipBgColor: "white", // css颜色值
topTipTextColor: "black", // css颜色值
ocrTextColor: "#333333", // css颜色值
inputBgColor: "#f7f7f7", // css颜色值
btnBgColor: "#fb5d01", // css颜色值
btnTextColor: "white", // css颜色值
maskColor: "rgba(2, 2, 2, 0.7)", // css rgba
backIconImg: "", // 图片链接
},
facePage: {
backgroundColor: 'white', // css颜色值
topTipColor: "#333333", // css颜色值
processBarColor: ['#FFA500', '#FF8C00', 'rgba(237,119,49,1)'], // css颜色值的数组，长度为3，值分别对应进度条由浅到深的颜色值
maskColor: 'rgba(0, 0, 0, 0.6)', // css rgba
maskTipColor: "white", // css颜色值
}
};{
"guidePage": {
"backgroundColor": "white",
"btnBackgroundColor": "#fb5d01",
"btnTextColor": "white",
"btnShadow": "0 16px 32px 0 rgba(251, 115, 38, 0.3)",
"circle1Img": "",
"circle2Img": "",
"leftBorderImg": "",
"faceImg": "",
"ocrImg": ""
},
"ocrPage": {
"ocrBgColor": "rgba(2, 2, 2, 0.8)",
"tipColor": "white",
"backIconImg": "",
"maskColor": "rgba(2, 2, 2, 0.7)",
"ocrPhotoBorderImg": "",
"albumIconImg": "",
"submitIconImg": ""
},
"ocrResultPage": {
"backgroundColor": "white",
"topTipBgColor": "white",
"topTipTextColor": "black",
"ocrTextColor": "#333333",
"inputBgColor": "#f7f7f7",
"btnBgColor": "#fb5d01",
"btnTextColor": "white",
"maskColor": "rgba(2, 2, 2, 0.7)",
"backIconImg": ""
},
"facePage": {
"backgroundColor": "white",
"topTipColor": "#333333",
"processBarColor": [
"#FFA500",
"#FF8C00",
"rgba(237,119,49,1)"
],
"maskColor": "rgba(0, 0, 0, 0.6)",
"maskTipColor": "white"
}
}配置项说明
自定义页面的颜色设置：SDK支持客户传入不同UI组件颜色色值实现颜色的替换。
自定义icon：指SDK支持客户传入不同icon或图片资源实现效果替换。icon大小和位置不变。
自定义框样式：指SDK支持客户传入不同资源文件实现效果替换。框大小和位置不变。
模块页面 | 元素 | 说明 | 配置项 | 配置项说明 |
引导页（仅限WebSDK） | 页面背景颜色 | 无。 | guidePage: { backgroundColor: "", } | backgroundColor：CSS颜色值。 |
示例图 | 支持客户替换示例图。 | guidePage: { circle1Img: "", circle2Img: "", leftBorderImg: "", faceImg: "", ocrImg: "", } |
| |
按键背景颜色/按键字体颜色/按键下方阴影颜色 | 无。 | guidePage: { btnBgColor: "", btnTextColor: "", btnShadow: "", } |
| |
证件采集页 | 页面背景颜色 | 无。 | ocrPage: { ocrBgColor: "", } | ocrBgColor：CSS颜色值。 |
证件取景框的颜色 | 替换资源实现适配卡证、护照不同形状和颜色的变化。 | ocrPage: { ocrPhotoBorderImg: "", } |
| |
证件取景框的样式 | ||||
相册icon | 替换资源实现样式和颜色的变化。 | ocrPage: { albumIconImg: "", } |
| |
蒙层颜色/蒙层不透明度 | 无。 | ocrPage: { maskColor: "", } | maskColor：CSS rgba值。 | |
蒙层上方文案颜色 | 无。 | ocrPage: { tipColor: "", } | tipColor：CSS颜色值。 | |
退出icon | 替换资源实现样式和颜色的变化。 | ocrPage: { backIconImg: "", } |
| |
提交icon | 替换资源实现样式和颜色的变化。 | ocrPage: { submitIconImg: "", } |
| |
OCR结果编辑页 | 页面背景颜色 | 无。 | ocrResultPage: { backgroundColor: "", } | backgroundColor：CSS颜色值。 |
顶部提示背景色/顶部提示文字颜色 | 无。 | ocrResultPage: { topTipBgColor: "", topTipTextColor: "", } | topTipBgColor/topTipTextColor：CSS颜色值。 | |
OCR信息项文字颜色 | 无。 | ocrResultPage: { ocrTextColor: "", } | ocrTextColor：CSS颜色值。 | |
键入框背景色 | 无。 | ocrResultPage: { inputBgColor: "", } | inputBgColor：CSS颜色值。 | |
蒙层颜色/蒙层不透明度 | 无。 | ocrResultPage: { maskColor: "", } | maskColor：CSS rgba值。 | |
退出icon | 替换资源实现样式和颜色的变化。 | ocrResultPage: { backIconImg: "", } |
| |
按键背景颜色/按键字体颜色 | 无。 | ocrResultPage: { btnBgColor: "", btnTextColor: "", } | btnBgColor/btnTextColor：CSS rgba值。 | |
活体检测页 | 页面背景颜色 | 无。 | facePage: { backgroundColor: "", } | backgroundColor：CSS颜色值。 |
标题《拿起手机，眨眨眼》字体颜色 | 无。 | facePage: { topTipColor: "", } | topTipColor：CSS颜色值。 | |
取景框周围进度条的颜色 | 无。 | facePage: { processBarColor: ['', '', ''], } | processBarColor：CSS颜色值的数组，长度为3，值分别对应进度条由浅到深的颜色值。 | |
蒙层颜色/蒙层不透明度 | 无。 | facePage: { maskColor: "", } | maskColor：CSS rgba值。 | |
蒙层上方文案颜色 | 无。 | facePage: { maskTipColor: "", } | maskTipColor：CSS颜色值。 |