日前，图像风格转换服务有了比较大的更新，可将图像转化成卡通画、铅笔画、彩色铅笔画，或者哥特油画、彩色糖块油画、呐喊油画、神奈川冲浪里油画、奇异油画、薰衣草油画等共计9种风格，可用于开展趣味活动，或集成到美图应用中对图像进行风格转换。
转换效果：
薰衣草油画风格
想了解AI开放平台API的调用过程，请参看我之前的帖子：《车牌识别》https://ai.baidu.com/forum/topic/show/943028
想了解微信小程序的开发过程，请参看我之前的帖子：《UNIT接入小程序》https://ai.baidu.com/forum/topic/show/953022
下面简要介绍图像风格转换的小程序接入过程：
1 系统框架
用到的技术主要有：百度图像风格转换和微信小程序。小程序将用户上传的图片提交给百度图像处理服务，进行图像风格转换，目前有9种风格可选。返回的结果通过解码，还原成渲染后的图片显示出来，并可以预览和保存。全部功能都在小程序客户端完成，不需要服务器，适合个人开发者使用。
2 创建小程序项目
在根目录的全局配置文件app.json中增加："pages/styletrans/styletrans" ，会自动创建相关页面文件，结构如下：
styletrans.js：功能逻辑模块
styletrans.wxss：页面样式文件
styletrans.wxml：页面布局文件
styletrans.json：页面配置文件
3 调用图像风格转换API
3.1 首先要在控制台创建应用，调用图像风格转换API，“获取API Key/Secret Key”。
接口文档地址：https://ai.baidu.com/ai-doc/IMAGEPROCESS/xk3bclo77
请求URL: https://aip.baidubce.com/rest/2.0/image-process/v1/style_trans
Body中放置请求参数，参数详情如下：
返回参数：
3.2 图像风格转换功能实现
（1）发送URL请求核心代码
//在baiduai.js中发送URL请求，并进行封装。
let style_transUrl = 'https://aip.baidubce.com/rest/2.0/image-process/v1/style_trans';
//图像风格转换API 图片base64
let style_transRequest = (base64Img, callback) => {
var accessToken = app.globalData.access_token;
console.log(accessToken);
var option = app.globalData.option;
console.log(option);
//拼接接口body参数
let params = {
image: base64Img,
option: option
}
//发送接口请求
wx.request({
url: style_transUrl + '?access_token=' + accessToken,
data: params,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
success: function (res) {
callback.success(res.data)
},
fail: function (res) {
if (callback.fail)
callback.fail()
}
})
}
最后，暴露接口，供调用。
module.exports = {
style_transRequest: style_transRequest,
getIocrToken: getIocrToken
}(2)定义按钮点击事件
//在styletrans.js中定义定义按钮点击事件
uploads: function () {
api.getIocrToken();
var that = this
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
if (res.tempFiles[0].size > 4096 * 1024) {
wx.showToast({
title: '图片文件过大',
icon: 'none',
mask: true,
duration: 1500
})
} else {
that.setData({
img: res.tempFilePaths[0]
})
console.log(that.data.img);
}
wx.showLoading({
title: "分析中...",
mask: true
})
//根据上传的图片读取图片的base64
var fs = wx.getFileSystemManager();
fs.readFile({
filePath: res.tempFilePaths[0].toString(),
encoding: 'base64',
success(res) {
//获取到图片的base64 进行接口请求
api.style_transRequest(res.data, {
success(res) {
//console.log(res);
var data = res.image;
if (data != '') {
wx.hideLoading();
that.setData({
img2: 'data:image/jpg;base64,' + data
})
console.log(that.data.img2);
} else {
wx.hideLoading();
wx.showModal({
showCancel: false,
title: '温馨提示',
content: '没有识别出结果'
})
}
}
})
}
})
},
})
},（3）图片预览功能实现
/**
* 在styletrans.js中定义，通过点击可以预览图片以及保存
*/
preview: function (e) {
var that = this;
if (that.data.img2 == "") {
wx.showToast({
title: '请先选择图片',
icon: 'none',
mask: true,
duration: 1000
})
} else {
wx.previewImage({
urls: [that.data.img2],
current: that.data.img2
})
}
}（4）修改页面样式文件
/* pages/tts/tts.wxss */
rg_view {
padding: 2px;
background-color: #fff;
}
/* 注意点：使用columns时，每一行中的组件本身的高度不能高于组件所在行的行高，
否则会发现组件的好似被切割成2块或多块了 */
.rg {
width: 100%;
height: 100%;
columns: 3;
column-gap: 2rpx;
letter-spacing: 2px;
line-height: 20px;
}
/*
注意点：columns分列后，最好使用margin-bottom控制行间距，
margin-top会导致第一项与后面的项不一致，很丑
*/
.class_r_g {
text-align: center;
width: 100%;
margin-bottom: 5px;
}
/* radio文本的点击效果 */
.checkedt {
color: #40E0D0;
border: #40E0D0 1px solid;
border-radius: 4px;
font-size: 11px;
padding: 3px 3px;
background-color: rgb(243, 1, 1);
}
/*
radio文本的默认效果
注意点：组件本身的高度不能高于组件所在行的行高，否则会发现组件的好似被切割成2块或多块了
*/
.normalt {
color: #666666;
border: #e6e6e6 1px solid;
border-radius: 4px;
font-size: 11px;
padding: 3px 3px;
}
button {
font-family: 微软雅黑;
}
.baikeform{
font-size: 20rpx;
color: #c0c0c0;
border-top: 1rpx solid #eeeeee;
margin:30rpx 40rpx 0rpx 40rpx;
padding: 20rpx;
}
.page-body-info {
display: flex;
box-sizing: border-box;
padding: 30rpx;
height: 420rpx;
border-top: 1rpx solid #d9d9d9;
border-bottom: 1rpx solid #d9d9d9;
align-items: center;
justify-content: center;
}
.up {
color: rgb(255, 255, 255);
font-size: 20px;
font-family: 微软雅黑;
width: 100%;
height: 50px;
vertical-align: middle;
text-align: center;
line-height: 45px;
border-radius: 5px;
background-color: rgb(128, 207, 247);
}
.img_wrap {
margin-bottom: 10px;
width: 750rpx;
height: 420rpx;
background: #ececec;
}
image {
width: 100%;
height: 100%;
max-height: 1
}
.msg {
margin: 10px 0;
text-align: center;
}
.table {
margin-top: 10rpx;
border: 0px solid darkgray;
width: 100%;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 80rpx;
}
.td {
font-family: 微软雅黑;
font-size: 28rpx;
width:100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}
.bg-g{
background: white;
}
.baikeform{
font-size: 20rpx;
color: #c0c0c0;
border-top: 1rpx solid #eeeeee;
margin:30rpx 40rpx 0rpx 40rpx;
padding: 20rpx;
}
.th {
font-size: 28rpx;
width: 48%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 80rpx;
align-items: center;
}
4 实现效果
请问有视频讲解吗？
效果还是不错滴