AI战疫【百度大脑新品体验】小程序之图像风格转换
wangwei8638 发布于2020-05 浏览:2388 回复:2
1
收藏

日前,图像风格转换服务有了比较大的更新,可将图像转化成卡通画、铅笔画、彩色铅笔画,或者哥特油画、彩色糖块油画、呐喊油画、神奈川冲浪里油画、奇异油画、薰衣草油画等共计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 实现效果


 

收藏
点赞
1
个赞
共2条回复 最后由用户已被禁言回复于2022-04
#3AIyou280回复于2021-11

请问有视频讲解吗?

 

1
#2wangwei8638回复于2020-05

效果还是不错滴

1
TOP
切换版块