小程序圖片合成

引言

以前的同事說小程序合并生成圖片無法解決了，今天解決不了老板讓滾蛋。好吧，本著人道主義精神，我花了半天時(shí)間幫它解決了。順便記錄下幫助有需要的人。

需求分析

用戶可以選擇不同場景，每個(gè)場景有三個(gè)圖。一張底色圖，一張二維碼圖，還有一張文字圖片。要求二維碼圖片可刪除，文字圖片可移動。最后將三張圖片合成一張圖片。

上代碼

首先我們將頁面分成兩塊.一塊為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
    })
  },

  //返回觸發(fā)事件
  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, //請求的網(wǎng)絡(luò)圖片路徑
      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 + "進(jìn)入文本圖片");
    wx.getImageInfo({
      src: that.data.text_img, //請求的網(wǎng)絡(luò)圖片路徑
      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, //請求的網(wǎng)絡(luò)圖片路徑
      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, //請求的網(wǎng)絡(luò)圖片路徑
        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)

  
    
  },
  
})

結(jié)束

代碼都已貼上。主要的方法已添加注釋。不過我也有個(gè)疑問，在最后的合成時(shí)，需要延遲幾秒才會得到圖片，否則一直無法獲取合成圖片。也望大神們指點(diǎn)迷津。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容