微信小程序一键发圈且图片下载时添加logo

html

<view class="container">
  <view class="list" wx:for="{{imglist}}" wx:key="index" >
    <view class="title">
      <image src="../../images/logo.jpg" class="logo"/>
      <text class="title_name">{{item.title_name}}</text>
      <view class="btn" data-index="{{index}}" bindtap="download">
      一键发圈</view>
    </view>
    <view class="list_content">
      <text class="context" wx:for="{{item.content}}" wx:key="index">{{item}}</text>
      <text class="copy" bindtap='copy' data-index="{{index}}">复制</text>
      <view class="contimg">
        <view wx:for="{{item.imgarr}}" wx:key="index">
          
          <view class="cont_images"style="background:url({{item.img_url}}) no-repeat;background-size: cover;background-position:center 100;">
            
          </view>
          <canvas class='canvas' style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;top:{{canvasHeight*2}}px;" canvas-id="firstCanvas"></canvas>
        </view>
      </view>
      
    </view>
  </view>
</view>

css

/**index.wxss**/
.container{
  width: 100%;
  margin: 0 auto;
  background: rgb(221,221,221);
}
.list{
  width:90%;
  padding: 0 5%;
  background: #fff;
}
.title{
  width: 100%;
  height:60rpx;
  padding-top: 5%;
}
.logo{
  display: block;
  float: left;
  width: 60rpx;
  height:60rpx;
}
.title_name{
  display: block;
  float: left;
  margin-left: 50rpx;
  color: #000;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  text-align: center;
  font-weight: bolder;
}
.btn{
  float: right;
  width:180rpx;
  height:60rpx;
  line-height: 60rpx;
  background: #111;
  border-radius:50rpx;
  color: #fff;
  text-align: center;
}
.list_content{
  width: 80%;
  padding: 3% 10%;
  padding-bottom: 3%;
  margin-bottom: 3%
}
.context{
  display: block;
  font-size: 26rpx;
  color: #444
}
.copy{
  display: block;
  color: rgb(113,164,206);
  font-size: 26rpx;
}
.contimg{
  width: 100%;
  margin-top: 3%;
  overflow: hidden;
}
.contimg>view{
  float: left;
  width: 32%;
  height:32%;
  margin-bottom: 2%;
  text-align: center;
  
}

.contimg>view:nth-child(3n+2){
  margin: 0 2%;
  margin-bottom: 2%;
}
.cont_images{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background-size: cover;
  background-position: center;
  
}
.canvas{
    position: fixed;
    top: 200%;
    left: 0;
    width: 100%;
    height: 100%; 
}

js

//获取应用实例
const app = getApp()

Page({
  data: {

    imglist: [
    ]
  },
  //事件处理函数 保存图片
  download(e) {
    var that = this;
    let index = e.currentTarget.dataset.index;
    that.getsave(0, that.data.imglist[index].imgarr.length, index);
    that.textPaste(index)
  },
  getsave(i, length, index) {
    var that = this;
    that.setData({
      canvasWidth: that.data.imglist[index].imgarr[i].width,
      canvasHeight: that.data.imglist[index].imgarr[i].height
    })
    wx.showLoading({
      title: '下载中(' + (i + 1) + '/' + length + ')',
    })
    const downloadTask = wx.downloadFile({
      url: this.data.imglist[index].imgarr[i].img_url,
      success: (res) => {
        let ctx = wx.createCanvasContext('firstCanvas');
        console.log(res)
        
        // 解决背景图尺寸不一致，导致绘制上去的logo变小问题（根本原因：绘制图尺寸与画布css尺寸不一致）
        let scal = that.data.imglist[index].imgarr[i].height / that.data.imglist[index].imgarr[i].width;
        if (scal>1){
          scal = 1;
        }else{
          scal = that.data.imglist[index].imgarr[i].height / that.data.imglist[index].imgarr[i].width;
        }
        console.log(scal)
        ctx.drawImage(res.tempFilePath, 0, 0, that.data.imglist[index].imgarr[i].width, that.data.imglist[index].imgarr[i].height);
        //绘制logo图片时，带域名的图片会涉及到跨域问题，所以最好是使用本地图片或者将图片转为base64的格式
        ctx.drawImage('../../images/logos.png', that.data.imglist[index].imgarr[i].width - 150 * scal, that.data.imglist[index].imgarr[i].height - 60 * scal, 122 * scal, 29 * scal);
        ctx.draw(false, function() {
          wx.canvasToTempFilePath({
            canvasId: 'firstCanvas',
            success: (ressss) => {
              wx.saveImageToPhotosAlbum({
                filePath: ressss.tempFilePath,
                success: (res) => {
                  if (i + 1 == length) {
                    wx.showToast({
                      title: '保存成功',
                    });
                  }
                  wx.hideLoading()
                  if (++i < length) {
                    that.getsave(i, length, index);//回调函数里无法直接用this
                  }
                },
                fail: (err) => {
                  wx.showToast({
                    title: '保存图片失败',
                    icon: 'none',
                  })
                },
              })
            },
            fail: (e) => {
              console.log(e)
            }
          })
        })

      },
    })
    // 下载进度
    downloadTask.onProgressUpdate((res) => {
      if (res.progress > 0) {
        this.setData({
          schedule: true,
          percent: res.progress
        })
      }
      if (res.progress == 100) {
        this.setData({
          schedule: false
        })
      }
    })
  },

  // 复制
  textPaste(index) {
    let idx = index;
    wx.showToast({
      title: '复制成功',
    })

    var text = this.data.imglist[idx].content;
    var str = '';
    for (var i = 0; i < text.length; i++) {
      str += text[i] + ' \n'
    }
    wx.setClipboardData({
      data: str,
      success: function(res) {
        wx.getClipboardData({ //这个api是把拿到的数据放到电脑系统中的
          success: function(res) {
            console.log(res.data) // data
          }
        })
      }
    })
  },
  // 复制
  copy(e) {
    let idx = e.currentTarget.dataset.index;
    wx.showToast({
      title: '复制成功',
    })
    var text = this.data.imglist[idx].content;
    var str = '';
    for (var i = 0; i < text.length; i++) {
      str += text[i] + ' \n'
    }

    wx.setClipboardData({
      data: str,
      success: function(res) {
        wx.getClipboardData({ //这个api是把拿到的数据放到电脑系统中的
          success: function(res) {
            console.log(res.data) // data
          }
        })
      }
    })
  },

  onLoad: function (options) {
    var scene = decodeURIComponent(options.scene)
    console.log(scene)
    var that = this;
    wx.request({
      url: ' ',
      header: {
        'Content-Type': 'application/json'
      },
      success: function(res) {
        console.log(res)
        that.setData({
          imglist: res.data
        })
      }
    })
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
  
})