微信小程序—头像加相框
今天我们要实现一个给头像加相框功能的小程序。
大约分三个步骤
1.在有相框列表的页面上传图片
2.进行裁剪或者旋转功能
这里用到的头像裁剪插件是https://github.com/wx-plugin/image-cropper
3.生成头像保存到本地

上代码！

//选择用户自己头像图片  upload() {    wx.chooseImage({      count: 1, // 默认9      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有      success(res) {        const src = res.tempFilePaths[0]        //将选择的图传至cropper页处理        wx.navigateTo({          url: `../cropper/cropper?src=${src}`        })      }    })  }

上传图片拿到图片的路径传到cropper页面去，cropper就是裁剪页面。在这个文件进行裁剪和旋转等方法的编写。
先把image-cropper文件放到与cropper同目录中，然后在cropper中引入。
cropper文件
cropper.json文件中添加image-cropper

{  "navigationBarTitleText": "裁剪图片",    "navigationBarBackgroundColor": "#000",  "usingComponents": {    "image-cropper": "../image-cropper/image-cropper"  }}

cropper.wxml

<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>    <view class='bottom'>        <view bindtap='cancel'>取消</view>        <view catchtouchstart='rotate' catchtouchend='end' data-type="rotate">旋转</view>        <view catchtap='confirm'>确定</view>    </view>

cropper.wxss

page{  background:rgb(14, 13, 13);}.bottom{  position: absolute;  width:100%;  bottom:50rpx;  display: flex;  z-index: 10;  justify-content: space-around;  color:#fff;}

cropper.js

Page({  data: {    src:'',    width: 300,//宽度    height: 300,//高度  },  onLoad: function (options) {    this.cropper = this.selectComponent("#image-cropper");    this.setData({      src: options.src    });  },  cropperload(e) {    console.log('cropper加载完成');  },  loadimage(e){    wx.hideLoading();    this.cropper.imgReset();  },  clickcut(e) {    //图片预览    wx.previewImage({      current: e.detail.url, // 当前显示图片的http链接      urls: [e.detail.url] // 需要预览的图片http链接列表    })  },   rotate() {    //在用户旋转的基础上旋转90°    this.cropper.setAngle(this.cropper.data.angle += 90);  },  end(e) {    clearInterval(this.data[e.currentTarget.dataset.type]);  },  confirm(e){    this.cropper.getImg(function(e){      console.log(e)      let avatar = e.url;        //获取到裁剪后的图片传到保存页面去        wx.redirectTo({          url: `../savePic/savePic?avatar=${avatar}`        })    })  },  //取消返回上一页面  cancel(){    wx.navigateBack({      url:'../makePic/makePic'    })  }  })

savePic–保存图片文件
savePic.wxml

<view wx:if="{{layerShow}}" class="maskLayer">            <view class="layerBox">                <view class="layerBoxP">                    <text>长按头像保存</text>                </view>            </view>        </view>    <view class="savebg">      <view class="content">        <view class="head_border">          <view>           <canvas canvas-id="myCanvas" class='bger'>       <image class="frame_width" bindlongtap="generate" src="{{bgsrc}}"></image>        <image src="{{src}}" class="avatar"></image></canvas>              <view style='position:absolute;left:400rpx;'><canvas  canvas-id='ahaucanvas' style='height:840px;width:840px;position:absolute;left:400rpx;'>            </canvas>            </view>           </view>        </view>       </view>  <view class="desc" bindtap='goMakePic'>重新生成</view>

savePic.js

const app = getApp();   Page({  data: {    src: '',    bgsrc: '',    bgcss: '',    layerShow:true,    timer: '',//定时器名字    countDownNum: '60'//倒计时初始值  },  goMakePic(){    wx.navigateTo({      url: '/pages/makePic/makePic',    })  },  countdown(){    let that=this;    let countDownNum = that.data.countDownNum;    that.setData({    timer:setInterval(function(){      countDownNum--;      that.setData({        countDownNum: countDownNum,        layerShow:false      })      if(countDownNum==0){        clearInterval(that.data.timer)      }    },2000)    })  },  onLoad(option) {    var that = this;    var bgcss = app.globalData.toubgsrc.substr(14, 2);    //此处的app.globalData.toubgsrc是一个全局变量 在相框列表拿到被选中的相框    that.setData({      bgsrc: app.globalData.toubgsrc,      bgcss: bgcss    });      let { avatar } = option;    if (avatar) {      that.setData({        src: avatar      });    }  },  onReady(){    this.countdown();  },  //生成头像  generate() {    var self = this;    var contex = wx.createCanvasContext('ahaucanvas');     var avatarurl_width = 840; //画布宽    var avatarurl_heigth = 840; //画布高    contex.drawImage(self.data.src, 127, 127,600,600);    contex.restore();    contex.save();    contex.beginPath(); //开始绘制    contex.drawImage(self.data.bgsrc, 0, 0, avatarurl_width, avatarurl_heigth);     contex.restore();    contex.draw(true, setTimeout(function () {      wx.canvasToTempFilePath({ //导出图片        width: 840,        height: 840,        destWidth: 840,        destHeight: 840,        canvasId: 'ahaucanvas',        success: res => {          wx.saveImageToPhotosAlbum({            filePath: res.tempFilePath,            success: function (data) {              console.log(data);              wx.showToast({                title: '保存成功',                icon: 'success',                duration: 2000              })            },            fail: function (err) {              if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {                // console.log("用户拒绝，再次发起授权")                wx.openSetting({                  success(settingdata) {                    console.log(settingdata)                    if (settingdata.authSetting['scope.writePhotosAlbum']) {                      // console.log('获取权限成功，给出再次点击图片保存到相册的提示。')                      wx.showToast({                        title: '请再次保存',                        icon: 'success',                        duration: 2000                      })                    }                   }                })              }            }          })        }      }, this)    }, 100))  },  goMakePic(){    wx.navigateTo({      url: '/pages/makePic/makePic',    })  }})

一个头像加相框的小程序就差不多做好了。不是很完美，还请大家多多指教O(∩_∩)O