使用小程序制作一个老照片修复工具，让追忆时光触手可及

小程序 6月前 0 2

瘦身

USART

一、文章前言

此文主要通过小程序来制作一个照片修复工具，实现黑白图片上色及图像效果增强等功能。

bean的配置

二、准备流程

2.1、注册百度开放平台及微信公众平台账号。
2.2、下载及安装微信Web开发者工具。
2.3、如需通过SDK调用及需准备对应语言的开发工具。

JNI反射调用

三、开发步骤

3.1、访问开放平台选择图像增强与特效并领取免费资源。

未来规划

在这里插入图片描述

后端开发

3.2、填写表单所需要的各项信息创建应用。

发布安卓包

在这里插入图片描述

QQ机器人

3.3、创建完毕后回到应用列表，将API Key 以及Serect Key复制出来，后面我们需要通过这些凭证来获取Token。

express

在这里插入图片描述

Python全栈基础教程

在这里插入图片描述

大批量数据

3.4、信息准备好后，打开微信开发者工具，新建项目，选择不使用模板、不使用云服务。

app安装失败

在这里插入图片描述

mysql 存储过程使用

3.5、在pages文件夹下面创建一个文件夹并新建对应的page文件。

数字可视化

在这里插入图片描述

顺序表

3.6、在JS文件中的onLoad函数中请求获取Token的接口，这时候就需要用到我们刚才所申请的ApiKey等信息了。

框架

在这里插入图片描述

qt5

/**
 * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let that = this;
    let ApiKey='这里填你所申请的ApiKey';
    let SecretKey='这里填你所申请的SecretKey';
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + ApiKey+'&client_secret='+SecretKey,
      method: 'POST',
      success: function (res) {
        that.setData({
          AccessToken:res.data.access_token
        });
      }
    });
  },

3.7、编译程序，检查接口是否有正常返回，下图所标记的字段就是我们所需要的token了，它的有效期为30天，记得要及时更新。

STM32+MODBUS

在这里插入图片描述

json.parse

3.8、查看接口请求说明及注意事项。

自动化测试

请求体格式化：Content-Type为application/x-www-form-urlencoded，通过json格式化请求体。
Base64编码：请求的图片需经过Base64编码，图片的base64编码指将图片数据编码成一串字符串，使用该字符串代替图像地址。您可以首先得到图片的二进制，然后用Base64格式编码即可。需要注意的是，图片的base64编码是不包含图片头的，如data:image/jpg;base64,。
图片格式：现支持PNG、JPG、JPEG、BMP，不支持GIF图片。

参数	是否必选	类型	说明
image	和url二选一	string	图片信息
url	和image二选一	string	图片完整URL，URL长度不超过1024字节

3.9、接下来要实现选择图片及将其转换为base64的功能，因为接口所需的参数需要base64格式；
借助wx.chooseImage及wx.getFileSystemManager()两个函数，实现选择图片跟转换格式的效果。
在wxml实现按钮及对应的响应函数。

总结

在这里插入图片描述

渗透测试

<view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">
    <image src="../../images/xj.png" class="btnImg"></image>
    上传图像
  </view>
  <view class="rightBtn" bindtap="identify">
    <image src="../../images/face.png" class="btnImg"></image>
    照片修复
  </view>
</view>

  loadImage() {
    let that = this;
    wx.chooseImage({
      count: 0,
      sizeType: ['original', 'compressed'], //原图 / 压缩
      sourceType: ['album', 'camera'], //相册 / 相机拍照模式
      success(res) {
        that.setData({
          imgSrc: res.tempFilePaths[0]
        });
        //将图片转换为Base64格式
        wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0],
          encoding: 'base64',
          success(data) {
            let baseData = data.data; //'data:image/png;base64,' + data.data;
            that.setData({
              baseData: baseData
            });
          }
        });
      }
    })
  },

3.10、将图片参数进行拼接并调用接口。

STM32F4 CAN

在这里插入图片描述

IPC

	//调用接口
  identify() {
    let that = this;
    let data = {image: that.data.baseData};
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/image-process/v1/colourize?access_token=' + that.data.token,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: data,
      success: function (identify) {
        that.setData({
          imgBase64: identify.data.image
        })
      }
    })
  },

3.11、将结果进行打印输出，其中的image字段就是经过修复后的图片信息，将这个数据存储到全局变量中。

部署

在这里插入图片描述

3.12、将所返回的base64格式的图片在页面进行展示。

<image src="data:image/png;base64,{{imgBase64}}" class="showImg" mode="heightFix"></image>

在这里插入图片描述

3.13、最后在页面上增加一个保存图片的按钮，让用户可以将修复好的照片进行保存到本地。这里要获取文件管理器对象，并且将encoding设置为base64。

  <view bindtap="downloadReport" class="centerBtn">保存图片</view>

   aa.writeFile({
        filePath: filepath,
        data: that.data.imgBase64,
        encoding:'base64',
        success: res => {
            wx.showLoading({
                title: '正在保存...',
                mask: true
            });
         
        }, fail: err => {
            console.log(err)
        }
    })

四、完整代码

<view class="containerBox">
  <view class="leftBtn" bindtap="loadImage">
    <image src="../../images/xj.png" class="btnImg"></image>
    上传图像
  </view>
  <view class="rightBtn" bindtap="identify">
    <image src="../../images/face.png" class="btnImg"></image>
    照片修复
  </view>
</view>

<image src="{{reproduction}}" class="showImg" mode="heightFix"></image>

<image src="data:image/png;base64,{{imgBase64}}" class="showImg" mode="heightFix"></image>

<view bindtap="downloadReport" class="centerBtn">保存图片</view>

<!--index.wxss-->
.containerBox{
  width:750rpx;
  display:flex;
  height:62rpx;
  margin-top:20rpx;
}
.leftBtn{
  display: flex;
  width:181rpx;
  height:62rpx;
  color:white;
  border:1rpx solid #4FAFF2;
  background:#4FAFF2;
  border-radius:10rpx;
  text-align: center;
  line-height:62rpx;
  font-size:28rpx;
  margin-left: 108rpx;
}
.rightBtn{
  display: flex;
  width:181rpx;
  height:62rpx;
  color:white;
  border:1rpx solid #4FAFF2;
  border-radius:10rpx;
  text-align: center;
  line-height:62rpx;
  font-size:28rpx;
  margin-left: 172rpx;
  background:#4FAFF2;
}
.btnImg{
  width:50rpx;height:50rpx;margin-top:6rpx;margin-left:6rpx;
}
.showImg{
  width:600rpx;
  height:400rpx;
  margin-left:75rpx;
  margin-top:50rpx;
  border-radius:10rpx;
}
.resultImg{
  width:300rpx;
  height:300rpx;
  margin-left:50rpx;
  margin-top:25rpx;
  border-radius:50%;
}
.result{
  margin-top:20rpx;
}
.centerBtn{
  width:181rpx;
  height:62rpx;
  color:white;
  border:1rpx solid #29D124;
  border-radius:10rpx;
  text-align: center;
  line-height:62rpx;
  font-size:28rpx;
  margin-left: 284rpx;
  background:#29D124;
  margin-top:20rpx;
}
.resultTitle{
  margin-left:75rpx;
  margin-top:10rpx;
  color:#2B79F5;
  font-size:25rpx;
}
.productTableTr{
  height: 80rpx;line-height: 80rpx;border-bottom: 5rpx solid #F8F8F8;display:flex;
}
.leftTr{
  width: 583rpx;height: 80rpx;line-height: 80rpx;
}
.rightTr{
  width: 119rpx;height: 80rpx;line-height: 80rpx;color: #FF2525;font-size: 26rpx;
}
.leftTrText{
  color: #2B79F5;font-size: 28rpx;margin-left: 15rpx;width: 283rpx;
}
.productDetailTable{
  width: 702rpx;margin-left: 24rpx;border:5rpx solid #F8F8F8;border-radius: 6rpx;
}
.copyBtn{
  color:white;background:#2B79F5;border-radius:8rpx;width:100rpx;height:50rpx;margin-top:15rpx;
}

 /**
   * 页面的初始数据
   */
  data: {
    token: '',
    imgSrc: '',
    baseData: '',
  },
   /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let that = this;
    let grant_type = 'client_credentials';
    let client_id = '';
    let client_secret = '';
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token?grant_type=' + grant_type + '&client_id=' + client_id + '&client_secret=' + client_secret,
      method: 'post',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        that.setData({
          token: res.data.access_token
        });
      }
    })
  },
  loadImage() {
    let that = this;
    wx.chooseImage({
      count: 0,
      sizeType: ['original', 'compressed'], //原图 / 压缩
      sourceType: ['album', 'camera'], //相册 / 相机拍照模式
      success(res) {
        that.setData({
          imgSrc: res.tempFilePaths[0]
        });
        //将图片转换为Base64格式
        wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0],
          encoding: 'base64',
          success(data) {
            let baseData = data.data; //'data:image/png;base64,' + data.data;
            that.setData({
              baseData: baseData
            });
          }
        });
      }
    })
  },
    //人脸检测
   //调用接口
  identify() {
    let that = this;
    let data = {image: that.data.baseData};
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/image-process/v1/colourize?access_token=' + that.data.token,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data: data,
      success: function (identify) {
        console.log(identify);
        that.setData({
          imgBase64: identify.data.image
        })
      }
    })
  },
  //保存图片
   downloadReport(){
    const that = this;
    var filepath = wx.env.USER_DATA_PATH+'/test.png';
    //获取文件管理器对象
    var aa = wx.getFileSystemManager();
    aa.writeFile({
        filePath: filepath,
        data: that.data.imgBase64,
        encoding:'base64',
        success: res => {
            wx.showLoading({
                title: '正在保存...',
                mask: true
            });
            //保存图片到相册
            wx.saveImageToPhotosAlbum({
                filePath: filepath,
                success: function (res) {
                    wx.hideLoading();
                    wx.showToast({
                        title: '保存成功！',
                        icon: 'success',
                        duration: 2000//持续的时间
                    })
                }
            })
        }, fail: err => {
            console.log(err)
        }
    })
},

声明：本站博客内容版权均属于原作者所有，这里所提供资源均只能用于参考学习用，书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

前端小程序微信小程序

一、文章前言

二、准备流程

三、开发步骤

四、完整代码

相关文章

发表回复 取消回复

发表回复取消回复