小程序图片合成

引言

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

需求分析

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

上代码

首先我们将页面分成两块.一块为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)

  
    
  },
  
})

结束

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,826评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,968评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,234评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,562评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,611评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,482评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,271评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,166评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,608评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,644评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,249评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2赞 354