最佳实践｜用腾讯云AI图像搜索打造属于自己的拍立淘

最近，在一个论坛交流会上，有嘉宾提出自己运营多年的微信小程序商城经常收到用户反馈：自己在逛街时候发现别人穿的好看的衣服，很难通过关键字定位到具体的商品，如果能拍照定位相关的商品就好了，问目前小程序里面能否实现这样的功能。作为一名软件开发者，日常网购也有类似的体会。如果能在小程序里集成商品搜索的功能，就能大大提升用户的体验，嘉宾的问题引发我极大的兴趣。

在调研过程中，发现腾讯云图像分析的图像搜索产品可以基于输入图片，智能识别图片中的商品主体，在自建图片库中搜索相同或相似的商品图片，并给出相似度打分。如果输入检索的图片包含服饰类商品，可智能识别上衣、下装、裙装、鞋、包、配饰等多种服饰的类别、颜色以及其他特征属性，实现电商场景下的以图搜图。

接下来，将详细分享一下我是如何在小程序里实现商品搜索的。

一、准备工作

1.1明确目标

在小程序里，通过输入商品图片来定位相似的商品图，类似于下面这个：

1.2了解图像搜索

在开始使用之前，还是得对我即将要用的产品进行一个比较详细的了解。

官网文档介绍：

接口文档：

1.3开通图像分析服务

接下来就可以按照官网文档的指引在腾讯云官网开通图像分析服务:

开通服务后，创建图片和检索图片分别会发放一万次免费资源包，可以在资源包管理页面查看使用情况：

二、开发流程

2.1获取个人密钥

在腾讯云官网访问管理页面，新建个人密钥：

2.2在线调试

下面通过在线调试的方式简单的实现拍立淘的功能。

（1）图库类型选择

首先查看图像搜索的文档，我们选择商品图像搜索的服务类型。

（2）创建图库

创建图片库，指定商品图像搜索，腾讯云官网提供了在线调用 API Explorer 工具，方便我们可视化调用。

（3）图片入库

创建图片，将商品图片入库到指定图库中，返回值中包含了主体位置信息。

（4）商品搜索

检索图片，指定商品图，在图库中进行检索，获取相似或者相同的商品图，返回结果中包含了与输入图类似的商品ID。

这样就基本上演示出了商品搜索的过程，对于使用而言，可以对输入的参数进行一些微调，满足更多的要求。

2.3使用SDK调用

（1）文档介绍

正式接入的话，需要集成腾讯云官网上提供的SDK。在文档的最下方，提供了多个语言的SDK，可以根据自己熟悉的语言进行接入。

（2）示例

以go语言为例，演示下如何使用。

第一步：安装基础包：

go get -v -u github.com/tencentcloud/tencentcloud-sdk-go/tencentcloud/common

安装图像分析依赖：

go get -v -u github.com/tencentcloud/tencentcloud-sdk-go/tencentcloud/tiia

第二步：实现调用，以创建图库为例。

credential := common.NewCredential(***, ***)
clientProfile := profile.NewClientProfile()
clientProfile.HttpProfile.Endpoint = "tiia.tencentcloudapi.com"cli, err := tiia.NewClient(credential, regions.Guangzhou, clientProfile)
if err != nil {panic(err)
}
//实例化一个请求结构
req := tiia.NewCreateGroupRequest()
//对请求参数进行赋值
req.GroupId = common.StringPtr("groupId")
req.GroupName = common.StringPtr("groupName")
req.Brief = common.StringPtr("brief")
req.MaxCapacity = common.Uint64Ptr(uint64(100))
req.MaxQps = common.Uint64Ptr(uint64(10))
req.GroupType = common.Uint64Ptr(uint64(5))
//调用请求
resp, err := cli.CreateGroup(req)
if err != nil {return
}

三、小程序实现商品搜索

上面介绍了图像搜索的基本能力，如何应用商品搜索能力，来实现拍立淘的效果呢，接下来以小程序为例，来演示一个简单的应用：

3.1构建底库

根据上述文档，我们在服务端使用sdk来初始化图片库，然后通过小程序端来访问，这里不再赘述。

1. 使用2.1申请的secretID，secretkey来创建图库。

2. 商品图入库。

3.2构建小程序

index.js

const app = getApp()Page({data: {urls: [],inputValue: "图片URL",buttonStatus: false,category: ['Jacket', 'dress', 'trousers', 'bag', 'shoe', 'accessories'],motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),canIUseGetUserProfile: false,canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false},// 事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs'})},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}},getUserProfile(e) { // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {console.log(res)this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息console.log(e)this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})},isUrl (url) {var urlRegExp=/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/;if(urlRegExp.test(url)){return true;}else{return false;}},imageSearch() {var that = thiswx.request({url: 'http://****/search',data: {"GroupId": "***","ImageUrl": this.data.inputValue},method: "POST",header: {'Content-Type': "application/json"},success (res) {if (res.data == null) {wx.showToast({icon: "error",title: '请求失败',})return}console.log(res.data)that.setData({urls: res.data.Urls,object: res.data.Object})that.drawInputImage()},fail(res) {wx.showToast({icon: "error",title: '请求失败',})}})},drawInputImage: function() {var that = this;wx.downloadFile({url: that.data.inputValue,success: function(res) {var imagePath = res.tempFilePath// 绘制wx.getImageInfo({src: imagePath,success: function(res) {wx.createSelectorQuery().select('#input_canvas') // 在 WXML 中填入的 id.fields({ node: true, size: true }).exec((r) => {// Canvas 对象const canvas = r[0].node// 渲染上下文const ctx = canvas.getContext('2d')// Canvas 画布的实际绘制宽高 const width = r[0].widthconst height = r[0].height// 初始化画布大小const dpr = wx.getWindowInfo().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr)// 清空画布ctx.clearRect(0, 0, width, height)let radio = height / res.heightconsole.log("radio:", radio)const img = canvas.createImage()var x = width / 2 - (res.width * radio / 2)img.src = imagePathimg.onload = function() {ctx.drawImage(img, x, 0, res.width * radio, res.height * radio)var allBox = that.data.object.AllBoxctx.fillStyle = 'rgba(247, 15, 2, 0.7)';for (var i in allBox) {if (allBox[i].Rect.X == that.data.object.Box.Rect.X && allBox[i].Rect.Y == that.data.object.Box.Rect.Y) {continue}ctx.fillRect(x + (allBox[i].Rect.X * radio), allBox[i].Rect.Y * radio, allBox[i].Rect.Width * radio,allBox[i].Rect.Height * radio);}// 绘制主体ctx.fillStyle = 'rgba(159, 255, 125, 0.7)'; //rgba(0, 0, 200, 0.5)ctx.fillRect(x + (that.data.object.Box.Rect.X * radio), that.data.object.Box.Rect.Y * radio, that.data.object.Box.Rect.Width * radio,that.data.object.Box.Rect.Height * radio);console.log(that.data.object.AllBox)// 绘制文字背景let text = `${that.data.category[that.data.object.CategoryId]} ${that.data.object.Box.Score}`ctx.fillStyle = '#221329'ctx.fillRect(x + (that.data.object.Box.Rect.X * radio), that.data.object.Box.Rect.Y * radio, that.data.object.Box.Rect.Width * radio, 15)// 绘制文字ctx.fillStyle = '#fcfafc'console.log(that.data.category[that.data.object.CategoryId])ctx.fillText(text, x + (that.data.object.Box.Rect.X * radio), that.data.object.Box.Rect.Y * radio + 10) }          })}})}})},handlerInput(e) {console.log(e)this.setData({inputValue: e.detail.value})},handlerSearch(e) {console.log(this.data.inputValue)if (!this.isUrl(this.data.inputValue)) {console.log("error url: ", this.data.inputValue)wx.showToast({icon: "error",title: '请输入正确url',})return }this.setData({buttonStatus: true})this.imageSearch()this.setData({buttonStatus: false})},handlerInputImage(e) {console.log(e)}
})

index.wxss:

/**index.wxss**/
.userinfo {display: flex;flex-direction: column;align-items: center;color: #aaa;
}.userinfo-avatar {overflow: hidden;width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}.usermotto {margin-top: 200px;
}page {background: rgb(255, 255, 255);
}
.page-section-spacing {width: 100%;
}
.container {padding: 0;
}.button_container {margin-top: 600rpx;
}
.flex-wrp{margin-top: 60rpx;margin: auto;width: 90%;overflow: hidden;
}.form-item {margin-bottom: 10px;margin-top: 10px;width: 90%;overflow: hidden;
}
.flex-item{float: left;width: 300rpx;height: 400rpx;font-size: 26rpx;margin: 10rpx 10rpx 0rpx 20rpx;overflow: hidden;
}
.flex-item-V{margin: 0 auto;width: 300rpx;height: 200rpx;
}.input {width: 75%;float: left;height: 36px;border: 1px solid #ddd;
}.button {float: right;height: 36px;    background: rgb(236, 111, 61);color: white;
}.view_line {width: 96%;height: 50rpx;display: flex;flex-direction: row;align-items: center;justify-content: left;margin: 0rpx 2% 0rpx 2%;
}.view_line view {width: 75%;height: 2rpx;background: linear-gradient(to right,#706f70, #706f70);
}.text_line {font-size: 25rpx;color: rgb(66, 66, 66);margin: 0rpx 2% 0rpx 2%;
}
.image {width: 100%;
}
.image image {width: 100%;background-size: auto 100%;background-repeat: no-repeat;
}

index.wxml:

<view class="container"><div class="form-item"><input placeholder=" 商品URL" class="input" bindinput="handlerInput" /><button class="button"  loading="{{buttonStatus}}" bindtap="handlerSearch" size="mini">搜索 </button></div><view class="view_line"><text class="text_line">输入图片</text><view></view></view><canvastype="2d"id="input_canvas"style="background:rgb(228, 228, 225); width: 360px; height: 240px;"></canvas><view class="view_line"><text class="text_line">搜索结果</text><view></view></view><view class="page-section-spacing"><view  class="flex-wrp" style="flex-direction:row;"><view wx:for="{{urls}}" class="flex-item"><view class="image"> <image mode="aspectFit" style="background-color: #eeeeee;" src="{{item}}"></image></view></view></view> </view></view>

编译即可：

3.3构建运行

输入商品图，图搜服务会进行主体识别，然后再进行相似图搜索，可以看到效果如下：

如果不做主体识别，可能搜不到我们想要的结果，例如，我们想要这个墨镜，但是不开主体识别的话可能会定位到衣服，导致没有结果：

看下图搜主体识别的文档介绍：

118px使用商品图像搜索默认会开启主体识别，涉及到以下两个参数：

默认情况下主体识别是打开的，服务会针对输入图中的服饰进行主体位置识别，以实现更好的搜索效果，如下：

按照上述主体识别的描述，指定下配饰类目，服务会定位到墨镜的位置，就可以搜索到预期的商品了：

到这一步就实现了小程序中商品搜索的基本功能，涉及到商品搜索的场景，都可以参考下。后面给朋友展示了小程序demo，体验下来，使用效果相当满意。

3.4查看调用量

在后续观察中，可以在腾讯云官网，进入到图像分析控制台，可以查看最近的调用情况。

了解更多图像搜索功能：https://cloud.tencent.com/product/imagesearch