클 라 우 드 개발 클 라 우 드 베이스 로 애플 릿 다 중 이미지 콘 텐 츠 안전 모니터링 코드 상세 설명
23354 단어 애플 릿클 라 우 드 개발다 중 그림콘 텐 츠 보안 검색
텍스트 의 안전 검 측 에 비해 그림 의 안전 검 측 은 약간 복잡 합 니 다.이 편 을 다 읽 으 면 get 입 니 다.
사용자 가 민감 한 규정 위반 사진 을 업로드 할 때 사용자 가 게시 하 는 것 을 금지 하고 이에 대응 하 는 사용자 친화 적 인 알림 을 한다.
응용 장면
일반적으로 한 장의 그림 에 위법 내용 이 있 는 지 검증 하 는 것 은 텍스트 안전 에 대한 검증 보다 다음 과 같은 응용 이 중요 하 다.
사진 지능 감 황:사진 촬영 과 관련 된 도구 류 응용(예 를 들 어 미 촬영,식 도 류 응용)사용자 사진 업로드 검 측;전자상거래 류 상품 의 이미지 검 측;미디어 류 사용자 글 에서 의 이미지 검 측 등 민감 한 얼굴 인식:사용자 프로필 사진;미디어 클래스 사용자 글 의 그림 검사;소 셜 네트워크 서비스 사용자 가 올 린 사진 검 측 등 사용자 가 자발적으로 콘 텐 츠 를 생산 하 는 것 은 모두 미리 검 사 를 해 야 한다.
그림 을 해결 하 는 안전 수단
애플 릿 개발 에서 두 가지 방식 을 제공 하 였 다.
https://api.weixin.qq.com/wxa/img_sec_check?access_token=ACCESS_TOKEN
사진 심 사 를 검 측 하고 공식 문서 에 따 르 면 반드시 전달 해 야 할 두 개의 매개 변수 가 필요 합 니 다.각각 access 입 니 다.token(인터페이스 호출 증명서),media(검 측 할 그림 파일)
HTTPS 호출 방식 에 대해 괴 롭 히 고 싶 은 파트너 는 텍스트 내용 보안 검색(전편)의 처리 방식 을 참고 하여 대동소이 하 게 처리 할 수 있 습 니 다.본 편 은 주로 클 라 우 드 개발 의 클 라 우 드 호출 을 위주 로 합 니 다.
기능 구현:애플 릿 논리
wxml 와 wxss 에 대해 여러분 은 스스로 임의로 수정 할 수 있 습 니 다.본 고 는 사진 안전 에 대한 검증 에 중심 을 두 고 있 습 니 다.
<view class="image-list">
<!-- -->
<block wx:for="{{images}}" wx:key="*this"><view class="image-wrap">
<image class="image" src="{{item}}" mode="aspectFill" bind:tap="onPreviewImage" data-imgsrc="{{item}}"></image><i class="iconfont icon-shanchu" bind:tap="onDelImage" data-index="{{index}}"></i></view>
</block>
<!-- -->
<view class="image-wrap selectphoto" hidden="{{!selectPhoto}}" bind:tap="onChooseImage"><i class="iconfont icon-add"></i></view>
</view>
<view class="footer"><button class="send-btn" bind:tap="send"> </button>
</view>
.footer {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
background: #34bfa3;
}
.send-btn {
width: 100%;
color: #fff;
font-size: 32rpx;
background: #34bfa3;
}
button {
border-radius: 0rpx;
}
button::after {
border-radius: 0rpx !important;
}
/* */
.image-list {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
}
.image-wrap {
width: 220rpx;
height: 220rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
position: relative;
overflow: hidden;
text-align: center;
}
.image {
width: 100%;
height: 100%;
}
.icon-shanchu {
position: absolute;
top: 0;
right: 0;
width: 40rpx;
height: 40rpx;
background-color: #000;
opacity: 0.4;
color: #fff;
text-align: center;
line-height: 40rpx;
font-size: 38rpx;
font-weight: bolder;
}
.selectphoto {
border: 2rpx dashed #cbd1d7;
position: relative;
}
.icon-add {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #cbd1d7;
font-size: 60rpx;
}
대응 하 는 JS 코드
/*
* API:wx.chooseImage
*(https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)
*
*
*///
const MAX_IMG_NUM = 9;
const db = wx.cloud.database(); //
Page({
/**
*
*/
data: {
images: [], //
selectPhoto: true, // +icon
},
/**
* --
*/
onLoad: function (options) {
},
//
onChooseImage() {
// , -
let max = MAX_IMG_NUM - this.data.images.length;
wx.chooseImage({
count: max, // count
sizeType: ['original', 'compressed'], //
sourceType: ['album', 'camera'], //
success: (res) => { // console.log(res)
this.setData({ // tempFilePath img src ,
images: this.data.images.concat(res.tempFilePaths)
})
//
max = MAX_IMG_NUM - this.data.images.length
this.setData({
selectPhoto: max <= 0 ? false : true // 9 ,
})
},
})
},
// ,
onDelImage(event) {
const index = event.target.dataset.index;
// , splice , ,
this.data.images.splice(index, 1)
this.setData({
images: this.data.images
})
// , ,
if (this.data.images.length == MAX_IMG_NUM - 1) {
this.setData({
selectPhoto: true,
})
}
},
})
현재 보 이 는 효 과 는 클 라 우 드 함수 코드 가 없습니다.전단 의 순 정적 전시 일 뿐 민감 한 이미지 에 대해 서 는 필터 처리 가 필요 합 니 다.
기능 구현:클 라 우 드 함수 사 이 드 논리
클 라 우 드 functions 디 렉 터 리 폴 더 에 클 라 우 드 함수 imgSecCheck 만 들 기
이 디 렉 터 리 에 config.json 을 만 듭 니 다.설정 매개 변 수 는 다음 과 같 습 니 다.
{
"permissions": {
"openapi": [
"security.imgSecCheck"
]
}
}
//
const cloud = require('wx-server-sdk');
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
//
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
try {
const result = await cloud.openapi.security.imgSecCheck({
media: {
contentType: 'image/png',
value: Buffer.from(event.img) // Buffer , ,
}
})
if (result && result.errCode.toString() === '87014') {
return { code: 500, msg: ' ', data: result }
} else {
return { code: 200, msg: ' ok', data: result }
}
} catch (err) {
//
if (err.errCode.toString() === '87014') {
return { code: 500, msg: ' ', data: err }
}
return { code: 502, msg: ' imgSecCheck ', data: err }
}
}애플 릿 에서 코드 는 다음 과 같다.
// miniprogram/pages/imgSecCheck/imgSecCheck.js
//
const MAX_IMG_NUM = 9;
const db = wx.cloud.database()
Page({
/**
*
*/
data: {
images: [],
selectPhoto: true, //
},
/**
* --
*/
onLoad: function (options) {
},
//
onChooseImage() {
// const that = this; // , , this // , -
let max = MAX_IMG_NUM - this.data.images.length;
wx.chooseImage({
count: max,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => { // , this.setData this that , , , this
console.log(res)
// tempFilePath img src
const tempFiles = res.tempFiles;
this.setData({
images: this.data.images.concat(res.tempFilePaths)
})
// , , , , , , , , , , // buffer ，
console.log(tempFiles);
tempFiles.forEach(items => {
console.log(items);
// buffer ，
wx.getFileSystemManager().readFile({
filePath: items.path,
success: res => {
console.log(res);
wx.cloud.callFunction({ // imgSecCheck , img
name: 'imgSecCheck',
data: {
img: res.data
}
})
.then(res => {
console.log(res);
let { errCode } = res.result.data;
switch(errCode) {
case 87014:
this.setData({
resultText: ' '
})
break;
case 0:
this.setData({
resultText: ' OK'
})
break;
default:
break;
}
})
.catch(err => {
console.error(err);
})
},
fail: err => {
console.error(err);
}
})
})
//
max = MAX_IMG_NUM - this.data.images.length
this.setData({
selectPhoto: max <= 0 ? false : true // 9 ,
})
},
})
},
//
onDelImage(event) {
const index = event.target.dataset.index;
// , splice , ,
this.data.images.splice(index, 1);
this.setData({
images: this.data.images
})
// , ,
if (this.data.images.length == MAX_IMG_NUM - 1) {
this.setData({
selectPhoto: true,
})
}
},
})
이로써 이미지 안전 검 사 는 이미 완성 되 었 습 니 다.검 측 결과 에 따라 우호 적 인 사용자 힌트 를 하거나 자신의 업무 논리 적 판단 을 하면 됩 니 다.
흔 한 문제
업로드 한 그림 의 크기 를 어떻게 제한 합 니까?
가끔 은 사용자 가 올 린 그림 의 크기 를 제한 하고 사용자 가 임의로 큰 그림 을 올 리 는 것 을 제한 해 야 합 니 다.어떻게 처리 해 야 합 니까?위 챗 애플 릿 에서 주로 wx.choose Image 라 는 인터페이스 가 성공 적 으로 돌아 온 후 임시 경로 의 res.tempfiles 의 size 큰 판단 을 통 해 처리 할 수 있 습 니 다.
구체 적 인 실례 코드 는 다음 과 같다
//
onChooseImage() {
// , -
let max = MAX_IMG_NUM - this.data.images.length;
wx.chooseImage({
count: max,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
console.log(res)
const tempFiles = res.tempFiles;
this.setData({
images: this.data.images.concat(res.tempFilePaths) // tempFilePath img src
})
// , , , , , , , , , , // buffer ，
console.log(tempFiles);
tempFiles.forEach(items => {
if (items && items.size > 1 * (1024 * 1024)) { //
wx.showToast({
icon: 'none',
title: ' 1M, ',
duration: 4000
})
// 1M ,
}
console.log(items);
// buffer ，
wx.getFileSystemManager().readFile({
filePath: items.path,
success: res => {
console.log(res);
wx.cloud.callFunction({ // imgSecCheck
name: 'imgSecCheck',
data: {
img: res.data
}
})
.then(res => {
console.log(res);
let { errCode } = res.result.data;
switch(errCode) {
case 87014:
this.setData({
resultText: ' '
})
break;
case 0:
this.setData({
resultText: ' OK'
})
break;
default:
break;
}
})
.catch(err => {
console.error(err);
})
},
fail: err => {
console.error(err);
}
})
})
//
max = MAX_IMG_NUM - this.data.images.length
this.setData({
selectPhoto: max <= 0 ? false : true // 9 ,
})
},
})
},
메모:위 챗 공식 이미지 콘 텐 츠 보안 인 터 페 이 스 를 사용 하여 검사 합 니 다.그림 크기 제한:1M,그렇지 않 으 면 오류 가 발생 합 니 다.
즉,1M 가 넘 는 크기 의 규정 위반 사진 에 대해 위 챗 이 공식 적 으로 제공 한 이 사진 안전 인 터 페 이 스 는 검증 할 수 없다 는 것 이다.
이것 은 자신의 업무 에 따라 정 해 집 니 다.애플 릿 에서 사용자 가 사진 을 올 리 는 크기 를 제한 합 니 다.만약 에 위 챗 이 공식 적 으로 제공 하 는 이미지 안전 인터페이스 가 자신의 업무 수 요 를 만족 시 키 지 못 한다 고 생각 되면 다른 이미지 내용 의 안전 검사 인 터 페 이 스 를 선택 할 수 있 습 니 다.
이 사진 의 안전 검 사 는 매우 필요 하 다.사용자 가 불법 사진 을 올 리 면 인터넷 을 통 해 전파 되면 사회 적 영향 을 미 치고 플랫폼 은 책임 이 있다.이런 전례 는 있다.
다 중 그림 업로드 덮어 쓰기 문 제 를 어떻게 해결 합 니까?
사진 을 올 리 는 데 있어 서 이 wx.cloud.uploadFileAPI 인 터 페 이 스 는 한 장의 사진 만 올 릴 수 있 지만 여러 장의 사진 을 클 라 우 드 저장 소 에 올 려 야 할 때 가 많 습 니 다.발 표를 클릭 하면 여러 장의 사진 을 클 라 우 드 저장 소 에 올 리 고 싶 습 니 다.
이 API 는 한 장 씩 만 업로드 할 수 있 지만 여러 장의 그림 을 반복 해서 한 장 씩 업로드 할 수 있 습 니 다.
cloudPath 에서 파일 을 업로드 하 는 인자 중 값:파일 이름
업로드 한 그림 이 덮어 쓰 이지 않 고 파일 이름 이 바 뀌 지 않 은 경우 덮어 쓰 지 않 는 다 는 것 을 어떻게 보장 합 니까?
그림 을 선택 할 때 업로드 해 서 는 안 됩 니 다.사용자 가 삭제 등 작업 을 할 수 있 기 때문에 직접 업로드 하면 자원 의 낭 비 를 초래 할 수 있 습 니 다.
게시 단 추 를 눌 렀 을 때 만 업로드 작업 을 수행 해 야 합 니 다.파일 이름 을 바 꾸 지 않 고 덮어 쓰 는 예제 코드 는 다음 과 같 습 니 다.
let promiseArr = []
let fileIds = [] // fileId
let imgLength = this.data.images.length;
//
for (let i = 0; i < imgLength; i++) {
let p = new Promise((resolve, reject) => {
let item = this.data.images[i]
//
let suffix = /\.\w+$/.exec(item)[0]; //
wx.cloud.uploadFile({ //
cloudPath: 'blog/' + Date.now() + '-' + Math.random() * 1000000 + suffix, // , es6
filePath: item, //
success: (res) => {
console.log(res);
console.log(res.fileID)
fileIds = fileIds.concat(res.fileID) //
resolve()
},
fail: (err) => {
console.error(err)
reject()
}
})
})
promiseArr.push(p)
}
// , Promise.all(), , , , , promise ,
Promise.all(promiseArr).then((res) => {
db.collection('blog').add({ // blog , img,
data: {
img: fileIds,
createTime: db.serverDate(), //
}
}).then((res) => {
console.log(res);
this._hideToastTip();
this._successTip();
})
})
.catch((err) => {
// console.error(err);
})이 업로드 인 터 페 이 스 는 한 번 에 한 장의 사진 만 올 릴 수 있 기 때문에 그림 을 순환 해서 한 장의 업로드 가 필요 합 니 다.
하 나 는 클 라 우 드 저장 소 에 올 리 는 것 이 고,다른 하 나 는 클 라 우 드 데이터 베이스 집합 에 추가 하 는 것 이다.이 두 가지 조작 에 주의해 야 한다.클 라 우 드 데이터 베이스 에 있 는 그림 은 클 라 우 드 저장 소 에서 가 져 온 다음 에 클 라 우 드 데이터 베이스 에 추가 하 는 것 이다.
예시 효 과 는 다음 과 같다.
업로드 한 그림 을 클 라 우 드 데이터베이스 에 저장 합 니 다.
메모:클 라 우 드 데이터베이스 에 데 이 터 를 추가 하려 면 수 동 으로 집합 을 만들어 야 합 니 다.그렇지 않 으 면 클 라 우 드 데이터베이스 에 업로드 할 수 없 으 면 오류 가 발생 할 수 있 습 니 다.
이로써 민감 한 이미지 에 대한 검 측 과 다 중 이미지 업로드 가 완료 됐다.
다음은 완전한 애플 릿 논리 예제 코드 입 니 다.
// miniprogram/pages/imgSecCheck/imgSecCheck.js
//
const MAX_IMG_NUM = 9;
const db = wx.cloud.database()
Page({
/**
*
*/
data: {
images: [],
selectPhoto: true, //
},
/**
* --
*/
onLoad: function (options) {
},
//
onChooseImage() {
// , -
let max = MAX_IMG_NUM - this.data.images.length;
wx.chooseImage({
count: max,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
console.log(res)
const tempFiles = res.tempFiles;
this.setData({
images: this.data.images.concat(res.tempFilePaths) // tempFilePath img src
})
// , , , , , , , , , ,
// buffer ，
console.log(tempFiles);
tempFiles.forEach(items => {
if (items && items.size > 1 * (1024 * 1024)) {
wx.showToast({
icon: 'none',
title: ' 1M, ',
duration: 4000
})
// 1M ,
}
console.log(items);
// buffer ，
wx.getFileSystemManager().readFile({
filePath: items.path,
success: res => {
console.log(res);
this._checkImgSafe(res.data); //
},
fail: err => {
console.error(err);
}
})
})
//
max = MAX_IMG_NUM - this.data.images.length
this.setData({
selectPhoto: max <= 0 ? false : true // 9 ,
})
},
})
},
//
onDelImage(event) {
const index = event.target.dataset.index;
// , splice , ,
this.data.images.splice(index, 1);
this.setData({
images: this.data.images
})
// , ,
if (this.data.images.length == MAX_IMG_NUM - 1) {
this.setData({
selectPhoto: true,
})
}
},
// ,
send() {
const images = this.data.images.length;
if (images) {
this._showToastTip();
let promiseArr = []
let fileIds = []
let imgLength = this.data.images.length;
//
for (let i = 0; i < imgLength; i++) {
let p = new Promise((resolve, reject) => {
let item = this.data.images[i]
//
let suffix = /\.\w+$/.exec(item)[0]; //
wx.cloud.uploadFile({ // , ,
cloudPath: 'blog/' + Date.now() + '-' + Math.random() * 1000000 + suffix,
filePath: item,
success: (res) => {
console.log(res);
console.log(res.fileID)
fileIds = fileIds.concat(res.fileID)
resolve()
},
fail: (err) => {
console.error(err)
reject()
}
})
})
promiseArr.push(p)
}
//
Promise.all(promiseArr).then((res) => {
db.collection('blog').add({ // blog ,
data: {
img: fileIds,
createTime: db.serverDate(), //
}
}).then((res) => {
console.log(res);
this._hideToastTip();
this._successTip();
})
})
.catch((err) => {
//
console.error(err);
})
} else {
wx.showToast({
icon: 'none',
title: ' , ',
})
}
},
//
_checkImgSafe(data) {
wx.cloud.callFunction({
name: 'imgSecCheck',
data: {
img: data
}
})
.then(res => {
console.log(res);
let {
errCode
} = res.result.data;
switch (errCode) {
case 87014:
this.setData({
resultText: ' '
})
break;
case 0:
this.setData({
resultText: ' OK'
})
break;
default:
break;
}
})
.catch(err => {
console.error(err);
})
},
_showToastTip() {
wx.showToast({
icon: 'none',
title: ' ...',
})
},
_hideToastTip() {
wx.hideLoading();
},
_successTip() {
wx.showToast({
icon: 'none',
title: ' ',
})
},
})
<view class="image-list">
<!-- -->
<block wx:for="{{images}}" wx:key="*this">
<view class="image-wrap"><image class="image" src="{{item}}" mode="aspectFill" bind:tap="onPreviewImage" data-imgsrc="{{item}}"></image><i class="iconfont icon-shanchu" bind:tap="onDelImage" data-index="{{index}}"></i>
</view>
</block>
<!-- -->
<view class="image-wrap selectphoto" hidden="{{!selectPhoto}}" bind:tap="onChooseImage"><i class="iconfont icon-add"></i></view>
</view>
<view class="footer">
<button class="send-btn" bind:tap="send"> </button>
</view>
<view>
: {{ resultText }}
</view>결어
본 고 는 주로 정부 가 제공 한 사진 security.imgSecCheck 을 통 해
인 터 페 이 스 는 이미지 안전 에 대한 검 사 를 실현 하고 실현 하 는 것 이 상당히 편리 하 다.기본 적 인 검 사 는 정부 에서 제공 하 는 이 인 터 페 이 스 를 이용 하여 충분히 사용 할 수 있 지만 더욱 엄격 한 검 사 를 하려 면 제3자 의 내용 안전 강 검 사 를 도입 하여 내용 의 안전 을 확보 할 수 있다.
올 린 그림 의 크기 를 어떻게 제한 하 는 지,동명 의 사진 업로드 덮어 쓰 는 문 제 를 해결 하 는 방법 을 실현 하 였 다.
만약 에 여러분 이 텍스트 내용 의 안전 검사 와 사진 안전 검사 에 대해 아직도 어떤 문제 가 있 으 면 아래 에 메 시 지 를 남 겨 서 같이 토론 할 수 있 습 니 다.
공중 번호:텐 센트 구름 개발
텐 센트 운 운 개발:https://cloudbase.net
클 라 우 드 개발 콘 솔:https://console.cloud.tencent.com/tcb?from=12304
총결산
클 라 우 드 개발 클 라 우 드 베이스 로 애플 릿 다 중 이미지 콘 텐 츠 안전 검 측 을 실현 하 는 데 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 애플 릿 클 라 우 드 개발 다 중 이미지 콘 텐 츠 안전 검 측 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 도 많은 지원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
