首先,发布的帖子,关于“security.imgSecCheck 这个图片内容审核API 有问题”的帖子,我已经解决。
之前说接口不稳定,错怪了官方!
向官方道歉,
向官方道歉,
向官方道歉!!!
以下分享经验【3个重点】:
1.(重点)控制图片尺寸:图片尺寸不超过 750px x 1334px
2.(重点)检测的图片,一定要压缩后再上传。(图片大小限制:1M)
自己检测过。500k-1MB还是大了。建议在50kb 左右。
3.(重点)通过获取文件信息,图片以ArrayBuffer格式上传云函数进行检测。
wx.getFileSystemManager().readFileSync(图片临时文件) //文件二进制内容 ArrayBuffer
以上条件缺一不可
根据返回结果,执行你需要的代码
复制以下代码。直接可以使用。
------------------------------------------------------------------------------------------------------------------------
【xxx.html代码】
<canvas canvas-id='imageBox' class="imageBox" style="border:#000 5px solid; width:{{imageBoxMake_Width}}px; left:{{screenWidth * 1.2}}px;"></canvas>
【xxx.wxss代码】
/* 设定页面决对定位 */
page{
position: relative;
}
/* 设定画布相对定位 */
.imageBox{
position: absolute;
z-index: 0;
}
【xxx.js代码】
//图片内容安全-画布
imageBoxMake_Width: '',
imageBoxMake_height: '',
/**生
命周期函数--监听页面加载
*/
onLoad: function(options) {
console.log('进入introduction页面')
this.setData({
//画布布局。让画布在屏幕之外
screenWidth: app.globalData.screenWidth, //画布距离屏幕左侧宽度 = 屏幕宽度
})
},
//【选择图片】方法
chooseImage() {
var that = this
//使手机发生较短时间的振动
wx.vibrateShort()
wx.showActionSheet({
itemList: ['拍照', '相册',],
success(res) {
console.log(res.tapIndex)
//拍照vounDemo
if (res.tapIndex == 0) {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
//['original', 'compressed']
sourceType: ['camera'],
success(res) {
// 图片临时地址
const imgFileURL = res.tempFilePaths[0]
console.log('打印取到的图片')
console.log(res)
//canvas绘制并压缩图片,然后图片内容安全检测
that.imageBoxMake(imgFileURL)
}
})
}
//手机相册 vounShow
else if (res.tapIndex == 1) {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success(res) {
// 图片临时地址
const imgFileURL = res.tempFilePaths[0]
console.log('打印取到的图片')
console.log(res)
//canvas绘制并压缩图片,然后图片内容安全检测
that.imageBoxMake(imgFileURL)
}
})
}
},
fail(res) {
console.log(res.errMsg)
}
})
},
//绘制【内容安全图片图片】canvas
imageBoxMake: function (imgFileURL) {
wx.showLoading({
title: '正在压缩图片', //正在内容安全检测
})
console.log('开始imageBoxMake方法')
var that = this
var saveSize = 100
var canvasId = 'imageBox' //画布ID
//创建画布
const ctx = wx.createCanvasContext(canvasId)
ctx.save()
//获得图片信息
wx.getImageInfo({
src: imgFileURL, //获得画芯图片
success(res) {
//图片比例
var perWHcanvas = res.height / res.width
that.setData({
//画布尺寸,处理为(100px)像素宽度。
imageBoxMake_Width: saveSize,
imageBoxMake_height: saveSize * perWHcanvas, //高度等比
})
//绘制图
ctx.drawImage(res.path, 0, 0, res.width, res.height, 0, 0, saveSize, saveSize * perWHcanvas)
ctx.restore()
//绘制保存
ctx.draw(true)
console.log('绘制【内容安全图片图片】canvas完成')
setTimeout(function () {
that.imageBoxIMG(saveSize, perWHcanvas, canvasId, imgFileURL) //压缩图片尺寸,并上传
}, 2000)
}
})
},
//压缩图片尺寸,并上传
imageBoxIMG: function (saveSize, perWHcanvas, canvasId, imgFileURL) {
console.log('开始 imageBoxIMG 方法')
var that = this
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: saveSize,
height: saveSize * perWHcanvas,
destWidth: saveSize,
destHeight: saveSize * perWHcanvas,
canvasId: canvasId, //这是canvasId
fileType: 'jpg', //目标文件的类型
quality: 0.8, //图片的质量
success(res) {
console.log('保存的图片临时路径' + res.tempFilePath)
var canvasImage = res.tempFilePath
wx.hideLoading() //隐藏 loading 提示框
const imageArrayBuffer = wx.getFileSystemManager().readFileSync(canvasImage) //文件二进制内容 ArrayBuffer
that.imgSecCheck(imgFileURL, imageArrayBuffer)
}
})
},
//图片智能鉴黄
imgSecCheck: function (imgFileURL, imageArrayBuffer) {
console.log('开始imgSecCheck方法')
wx.showLoading({
title: '图片安全检测中', //正在内容安全检测
})
//初始化云开发及设置其环境
wx.cloud.init({
env: app.globalData.env, //注意:我这里是调用app.js里设置好的云环境。你们可以改为自己的云环境
traceUser: true
})
wx.cloud.callFunction({
// 要调用的云函数名称
name: 'imgSecCheck',
// 传递给云函数的event参数
data: {
imageArrayBuffer: imageArrayBuffer
}
}).then(res => {
console.log('打印云函数imgSecCheck返回结果为')
console.log(res)
wx.hideLoading()//隐藏 loading 提示框
if (res.result.errMsg == "openapi.security.imgSecCheck:ok") {
//内容正常。这里可以执行你需要的【方法】代码
}
else{
//内容检测结果为不安全
this.showModal()
}
}).catch(err => {
//错误
console.log('打印err结果为 错误')
console.log(err)
wx.hideLoading() //隐藏 loading 提示框
//内容检测结果为不安全
this.showModal()
})
},
//内容检测结果为不安提示
showModal: function () {
wx.showModal({
title: '图片内容违规',
content: '通过腾讯图片智能鉴黄检测到你发布的内容,可能包含涉黄、涉暴、涉政等有害信息。为营造安全绿色的平台,我们坚决拒绝上传危害内容、言论。若你多次上传危害内容,系统将自动封号哦,并同步到网络安全部',
confirmText: '知道了',
confirmColor: '#000000',
showCancel: false,
success(res) {
if (res.confirm) {
console.log('用户点击知道了')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
【云函数代码】
// 云函数入口文件 imgSecCheckPro
const cloud = require('wx-server-sdk')
// 云函数入口函数
exports.main = async (event, context) => {
//初始化云函数
cloud.init({
env: event.env
})
try {
return await cloud.openapi.security.imgSecCheck({
media: {
contentType: 'image/png',
value: Buffer.from(event.imageArrayBuffer)
}
})
} catch (err) {
// 错误处理
// err.errCode !== 0
}
}
------------------------------------------------------------------------------------------
复制以上代码。直接可以使用。
希望对各位开发者有帮助。加油!
我110k的照片还是超过最大size了