小程序生成海报最完整代码
/* pages/distribut/poster/poster.wxss */
.canvas-image{
/* width: 90%;
height: 900rpx; */
width: 690px;height:590px;
margin:0 auto;
}
.haibao{
color:#fff;
background:red;
width:70%;
margin:0 auto;
border-radius:25px;
margin-top:30rpx;}
// pages/distribut/poster/poster.js
var app = getApp();
var request = app.request;
var setting = app.globalData.setting;
Page({
/**
* 页面的初始数据
*/
data: {
qrcode:'', //二维码路径
back_url:'', //背景图
canvasType: false,//canvas是否显示
imagePath: '', //合成图片地址
_width:0,
_heigth:0,
},
/*按生成图片按钮时*/
createNewImg: function () {
wx.showLoading({
title: '正在绘制图片',
})
},
// 保存图片
baocun() {
var that=this
if(that.data.imagePath){
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success() {
that.setData({
showShareImg: false
})
wx.showToast({
title: '图片保存成功，快去分享到朋友圈吧~',
icon: 'none',
duration: 2000
})
},
fail() {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}else{
wx.showLoading({
title: '请先保存再生成',
})
setTimeout(
()=>{
wx.hideLoading()
}, 1000)
}
},
createNewImg: function () {
/*获取手机宽高*/
let that = this
let imgHeigth = this.data.swiperHeight
let imgUrl = this.data.back_url
let qrcodeUrl = this.data.qrcode
wx.getSystemInfo({
success(res) {
that.setData({
_width: res.windowWidth,
_heigth: res.windowHeight,
canvasType: true,
})
}
})
let _width = this.data._width,
_heigth = this.data._heigth; //屏幕宽与高
var context = wx.createCanvasContext('mycanvas');// 绘制背景
context.setFillStyle("#eee");
context.fillRect(20, 100, 0, 500);
var back_url = that.data.back_url; //背景图片
var qrcode = that.data.qrcode; //二维码
context.drawImage(back_url,_width/9, _heigth/51, _width/1.25, _heigth/1.45);//背景图片
context.drawImage(qrcode,_width/2.5, _heigth/2.08, _width/4.2, _width/4.2);//二维码
context.stroke();
context.draw();
console.log('123')
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath,
canvasHidden: true
});
},
fail: function (res) {
console.log(res);
}
});
}, 200);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
request.get('/api/user/getUserPoster', {
success: function (res) {
console.log('******个人海报信息******',res)
var qrcode=res.data.data.qrcode;
var back_url=res.data.data.back_url;
wx.downloadFile({
url: back_url, //背景图
success: function (res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
console.log("reererererer",res)
that.setData({
back_url: res.tempFilePath
})
}
}
})
wx.downloadFile({
url: qrcode, //二维码
success: function (res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
console.log("reererererer",res)
that.setData({
qrcode: res.tempFilePath
})
}
}
})
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
有啥搞不懂问我看到就回!!!