小程序图片合成
引言
以前的同事说小程序合并生成图片无法解决了，今天解决不了老板让滚蛋。好吧，本着人道主义精神，我花了半天时间帮它解决了。顺便记录下帮助有需要的人。
需求分析
用户可以选择不同场景，每个场景有三个图。一张底色图，一张二维码图，还有一张文字图片。要求二维码图片可删除，文字图片可移动。最后将三张图片合成一张图片。
上代码
【小程序图片合成】首先我们将页面分成两块.一块为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;
}jsconst 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)},})
结束
代码都已贴上。主要的方法已添加注释。不过我也有个疑问，在最后的合成时，需要延迟几秒才会得到图片，否则一直无法获取合成图片。也望大神们指点迷津。
推荐阅读
- 宽容谁
- 一个人的旅行，三亚
- 第6.2章（设置属性）
- 布丽吉特，人生绝对的赢家
- 一个小故事，我的思考。
- 家乡的那条小河
- 讲述，美丽聪明的海欧！
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 夜游宫|夜游宫 心语