引言
以前的同事说小程序合并生成图片无法解决了，今天解决不了老板让滚蛋。好吧，本着人道主义精神，我花了半天时间帮它解决了。顺便记录下帮助有需要的人。
需求分析
用户可以选择不同场景，每个场景有三个图。一张底色图，一张二维码图，还有一张文字图片。要求二维码图片可删除，文字图片可移动。最后将三张图片合成一张图片。
上代码
首先我们将页面分成两块.一块为canvas用于合成图片，一块为view容器，处理文字图片和二维码图片。
wxml
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)
},
})
结束
代码都已贴上。主要的方法已添加注释。不过我也有个疑问，在最后的合成时，需要延迟几秒才会得到图片，否则一直无法获取合成图片。也望大神们指点迷津。