引言

以前的同事说小程序合并生成图片无法解决了，今天解决不了老板让滚蛋。好吧，本着人道主义精神，我花了半天时间帮它解决了。顺便记录下帮助有需要的人。

---

需求分析

用户可以选择不同场景，每个场景有三个图。一张底色图，一张二维码图，还有一张文字图片。要求二维码图片可删除，文字图片可移动。最后将三张图片合成一张图片。

上代码

首先我们将页面分成两块.一块为canvas用于合成图片，一块为view容器，处理文字图片和二维码图片。

wxml

<view class="">

  <view class="canvasStyle" wx:if="{{cshow}}">

    <canvas canvas-id="myCanvas" 
disable-scroll="true"  id='canvas-container' />
    <view class="Canvas_Text">

      
    </view>

  </view>

  <view class='draw-content' wx:if="{{!cshow}}">
    <image src='{{img}}' class="look-image"></image>
    <view class='litlelooks-wrap' bindtouchmove="imagetouchmove" style='left:{{leftLooks}}px;top:{{topLooks}}px;'>
     
      <image class='litlelooks-image' src='{{text_img}}'></image>

     
    </view>

      <view class='code-image-wrap' wx:if="{{showClose}}">
     
         <image class='code-image' src='{{qrcode_img}}'></image>
      <image class='close' src="../../images/icon_close.png" bindtap='hideLooks'></image>
    </view>

  
  </view>
  <view class="chooseImage">

    <view class="Btn generateBtn">
      <button  catchtap='textreplace'>文字替换</button>
 
      <button catchtap="Okgenerate">编辑完成</button>

       <button catchtap="test">test</button>
    </view>

  </view>
</view>

wxss


.canvasStyle{width:690rpx;height:1035rpx;border:1rpx solid #000;margin:20rpx auto;position:relative;}
.Canvas_Text{width:690rpx;height:1035rpx;position:absolute;top:1px;left:1px;z-index:1;}
.Canvas_Text image{width:100%;height:100%;}
.canvasStyle canvas{width:100%;height:100%;margin:1px 0 0 1px; background:none;position:relative;z-index:10;}

.BtnImg_select{height:80rpx;line-height:80rpx;}
.BtnImg_select:active{color:#f1f1f1;background-color:#d95649;}
.Input_text{border:1rpx solid #e6e6e6;border-radius:6rpx;font-size:30rpx;height:80rpx;margin:0 0 20rpx 0;}
.Input_text input{width:90%;height:100%;padding:0 5% 0 5%;}
.generateBtn{padding:10rpx 0 10rpx 0;font-size:28rpx;}
.generateBtn button{
 width: 213rpx;
 height: 88rpx;
 
 border-radius: 44rpx;
 background-color: #6F91FF;
color: #fff;
line-height: 88rpx;

font-size: 30rpx;
  margin-left:14.5%;
  float: left;

}



.draw-content{
  width: 690rpx;
  height: 1035rpx;
 

  overflow: hidden;
  border: 1px solid #ccc;
  margin:20rpx auto;
  position:relative;
}
.look-image{
  width: 690rpx;
  height: 1035rpx;
}
.litlelooks-wrap{
  position: absolute;

}
.close{
  position: absolute;
  right: -20rpx;
  top: -20rpx;
  width: 38rpx;
  height:38rpx;
}
.litlelooks-image{
 
}

.code-image-wrap{
 position: absolute;
  width: 120rpx;
  height: 120rpx;
  left:550rpx;
  top:880rpx;
}
.code-image{
   width: 120rpx;
  height:120rpx;
}

js

const app = getApp()
const ctx = wx.createCanvasContext('myCanvas');
Page({
  data: {
    text_x: 40, //x轴
    text_y: 10, //y轴
    imageUrl: '', // 生成的图片路径
    canvasWidth: '',
    canvasheight: '',
    content: '',
    subtitle: '',
    data: null,
    qrcode_img: '',
    QRCodeWidth:60,
    textimgWidth: 300,
    textimgheight: 450,
    img: '',
    template_id:'',
    text_img:'',
    leftLooks: '20',
    topLooks: '20',
    showClose:true,
    cshow:false
 
   
  },
  onLoad: function (options) {
    var that = this;
    console.log(JSON.stringify(options.data)+"哈哈34");
    //  that.Editetask(options.template_id); 
    that.setData({
      data: JSON.parse(options.data),
      text_img: JSON.parse(options.data).text_img,
      qrcode_img: JSON.parse(options.data).qrcode_img,
      img: JSON.parse(options.data).img,
      sort_small_id: options.sort_small_id,
      template_id: JSON.parse(options.data).template_id
    });
   

  },

  hideLooks:function(){
    this.setData({
      showClose:false
    })
  },

  test:function(e){
  var that=this;
    wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {   
      that.setData({
        canvasWidth: rect.width,
        canvasheight: rect.height
      });

      that.dowloadimg();

    }).exec();
  },

//文字图片移动
  imagetouchmove: function (e) {
    var self = this;
    self.setData({
      leftLooks: e.touches[0].clientX - 60,
      topLooks: e.touches[0].clientY - 60
    })
  },

  //返回触发事件
  returngo: function () {
    var that = this;
    that.dowloadimg();
  },
  //开始绘图
  dowloadimg: function () {
    var that = this;
    console.log(that.data.data.img + "不会的");
    wx.getImageInfo({
      src: that.data.data.img, //请求的网络图片路径
      success: function (res) {
        console.log(res.path+"背景图片");
        that.setData({
          imageUrl: res.path,
        });
        ctx.drawImage(res.path, 0, 0, that.data.canvasWidth, that.data.canvasheight);
        ctx.draw();
        that.Drawtextimg();
        if (that.data.showClose){
          that.drawcode();
        }


    
      }
    })


  
  },
  //画文字图片
  Drawtextimg:function(){
    var that=this;
    var that = this;
    console.log(that.data.text_x + "进入文本图片");
    wx.getImageInfo({
      src: that.data.text_img, //请求的网络图片路径
      success: function (res) {
        console.log(JSON.stringify(res) + "二维码");
        ctx.drawImage(res.path, that.data.leftLooks, that.data.topLooks, that.data.textimgWidth/3*2, that.data.textimgheight/3*2);

        ctx.draw(true);
      }
    })

  },
//画二维码
  drawcode: function () {
    var that = this;
    console.log("hahaahh1");
    wx.getImageInfo({
      src: that.data.qrcode_img, //请求的网络图片路径
      success: function (res) {
        console.log(JSON.stringify(res) + "二维码");
        ctx.drawImage(res.path, that.data.canvasWidth - 20 - that.data.QRCodeWidth, that.data.canvasheight - that.data.QRCodeWidth - 20, that.data.QRCodeWidth, that.data.QRCodeWidth);
        ctx.draw(true);
        
      }
    })

  },




  textreplace: function () {
    var that = this;
    console.log(that.data.sort_small_id +"that.data.sort_small_id1");
    if (that.data.data != '' || that.data.data != null) {
      wx.navigateTo({
        url: '/pages/Ps_touch/text_replace?sort_small_id=' + that.data.sort_small_id,
      })
    }
  },

  edite:function(){
    var that=this;
    var ctx = wx.createCanvasContext('myCanvas');
    wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {
      that.setData({
        canvasWidth: rect.width,
        canvasheight: rect.height
      });

      wx.getImageInfo({
        src: that.data.text_img, //请求的网络图片路径
        success: function (res) {
          console.log(JSON.stringify(res) + "二维码123");
          ctx.drawImage(res.path, that.data.text_x, that.data.text_y, that.data.textimgWidth / 3 * 2, that.data.textimgheight / 3 * 2);

          ctx.draw(true);
        }
      })

    }).exec();
  },
//合成图片
  Okgenerate: function () {

this.setData({
  cshow:true
})

    wx.showLoading({
      title: '正在合成图片..',
    });
    var that = this;


    wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {
      that.setData({
        canvasWidth: rect.width,
        canvasheight: rect.height
      });

      that.dowloadimg();

    }).exec();
    setTimeout(function(){
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 380,
        height: 570,
        destWidth: 760,
        destHeight: 1140,
        quality: 1,
        canvasId: 'myCanvas',
        success: function (res) {
          console.log(JSON.stringify(res) + "图片地址");
          wx.hideLoading();
          wx.navigateTo({
            url: '/pages/task/editefinish?img=' + res.tempFilePath + "&template_id=" + that.data.template_id,
          });


        }
      })
    },3000)

  
    
  },
  
})

---

结束

代码都已贴上。主要的方法已添加注释。不过我也有个疑问，在最后的合成时，需要延迟几秒才会得到图片，否则一直无法获取合成图片。也望大神们指点迷津。