微信小程序简易的截图工具

最近在做微信小程序，要做一个截图的功能，所以就做了一个简易的截图功能。废话不说，看功能实现吧(UI什么的没有专业的切图人员提供，自己随意写的，有点丑)。

js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    showImage: {
      url: '',
      height: '',
      width: ''
    },
    imgMaxWidth: '',
    imgMaxHeight: '',
    showBtn: true,
    x: 40,
    y: 40,
    scale: 1,
    moveViewWidth: '',
    moveViewHeight: '',
    lastImage: ''
  },

  /**
   * 图片加载获取图片参数
   */
  onImageLoad: function (e) {
    this.data.showImage.height = e.detail.height;
    this.data.showImage.width = e.detail.width;
    // let bili = e.detail.width / e.detail.height
    // if (bili > this.data.moveViewWidth / this.data.moveViewHeight) {
    //   wx.showToast({
    //     title: '请选择正确比例的图片',
    //   })
    //   this.setData({ showBtn: true })
    //   return;
    // }

    this.data.showImage.width = this.data.imgMaxWidth;
    this.data.showImage.height = e.detail.height * this.data.imgMaxWidth / e.detail.width

    this.setData({ showImage: this.data.showImage })
    var context = wx.createCanvasContext('canvasOne');
    context.drawImage(this.data.showImage.url, 0, 0, this.data.showImage.width, this.data.showImage.height)
    context.draw()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getSystemInfo({
      success: (res) => {
        let ww = res.windowWidth;
        let hh = res.windowHeight
        this.setData({
          imgMaxWidth: ww * 0.9
        });
        this.setData({ imgMaxHeight: hh })
        this.setData({ moveViewWidth: ww * 0.9 })
        this.setData({ moveViewHeight: this.data.moveViewWidth * 450 / 345 })
      }
    })
  },
  /**
   * 截图完成将指定canvas区域生成图片
   */
  jieDone: function () {
    var that = this
    wx.canvasToTempFilePath({
      x: that.data.x,
      y: that.data.y,
      width: that.data.moveViewWidth * that.data.scale,
      height: that.data.moveViewHeight * that.data.scale,
      destWidth: that.data.moveViewWidth * that.data.scale,
      destHeight: that.data.moveViewHeight * that.data.scale,
      canvasId: 'canvasOne',
      success: function (res) {
        that.data.showImage.url = res.tempFilePath
        that.data.showImage.height = that.data.moveViewWidth * that.data.scale
        that.data.showImage.width = that.data.moveViewHeight * that.data.scale
        that.setData({ showImage: that.data.showImage })
        that.setData({ showBtn: true })
        that.setData({ lastImage: res.tempFilePath })
        console.log(that.data.moveViewHeight, that.data.moveViewWidth)
        console.log(that.data.showImage.height, that.data.showImage.width)
      },
      fail(res) {
        wx.hideLoading()
        wx.showModal({
          title: '截取失败',
          content: res.errMsg
        })
        console.log("fail res:")
        console.log(res)
      }
    })
  },
  cancelImg: function () {
    this.setData({ showBtn: true })
  },
  selectTap() {
    var that = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success(res) {
        const tempFilePath = res.tempFilePaths[0]
        that.data.showImage.url = tempFilePath
        that.setData({ showImage: that.data.showImage })
        that.setData({ showBtn: false })
      }
    })
  },
  onChange: function (e) {
    console.log('')
    console.log(e.detail)
    this.setData({ x: e.detail.x })
    this.setData({ y: e.detail.y })
  },
  onScale: function (e) {
    this.setData({ scale: e.detail.scale })
  }
})

wxml代码

<!--pages/screenshot/screenshot.wxml-->
<view wx:if="{{showBtn}}" class="btn-w">
  <view class="btn" bindtap='selectTap'>选择照片</view>
  <image src="{{lastImage}}" onImageLoad="onImageLoad" style="width:{{moveViewWidth}}px;height:{{moveViewHeight}}px"></image>
</view>
<view class="wrapper" wx:if="{{!showBtn}}">
  <image src="{{showImage.url}}" bindload="onImageLoad" style="width:{{showImage.width}}px;height:{{showImage.height}}px"></image>
  <view class="canvas-wrapper">
    <canvas canvas-id="canvasOne" class="canvas-one" style="width:{{showImage.width}}px;height:{{showImage.height}}px"></canvas>
  </view>
  <movable-area class="move-area">
    <movable-view class='move-view' x="{{x}}" y="{{y}}" direction="all" bindchange="onChange" bindscale="onScale" style="width:{{moveViewWidth}}px;height:{{moveViewHeight}}px;"></movable-view>
  </movable-area>
  <view class="bottom-w">
    <view bindtap='cancelImg'>取消</view>
    <view bindtap='jieDone'>完成</view>
  </view>
</view>

wxss代码

/* pages/screenshot/screenshot.wxss */
.btn-w{
  text-align: center;
}
.btn{
  width:100%;
  border-radius: 12rpx;
  height:100rpx;
  line-height: 100rpx;
  background: linear-gradient(to right,yellow,green);
  text-align: center;
  font-size:30rpx;
}
.wrapper{
  position:relative;
  width:100%;
  height:93vh;
  background-color:rgba(0, 0, 0, .7);
  overflow: hidden;
}
.wrapper image{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index:5;
  margin-top:40rpx;
}
.canvas-one{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width:90%;
  margin:0 auto;
  vertical-align: middle;
}
.canvas-wrapper{
  position:relative; 
  width:100%;
  margin-left:750rpx;
  height:93vh;
}
.move-area{
  width:90%;
  height:100vh;
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  z-index: 6;
}
.move-view{
  position:absolute;
  border:3rpx solid #fff;
  z-index:7;
}
.bottom-w{
  position:fixed;
  width:100%;
  bottom:0;
  height:7vh;
  line-height: 7vh;
  text-align: center;
  color:#fff;
  background-color:#000;
  font-size:30rpx;
  z-index: 10;
}
.bottom-w view{
  float:left;
  width:50%;
  text-align: center;
}

就这样完成，功能相当简易，有时间继续优化扩展，啦啦啦啦！（规则就是用来打破的）

对学习抱有热情的开发小伙伴欢迎加入 qq群685421881，更欢迎热爱编程的妹子进入，让我们一起学习 并进步吧！