微信小程序实现张图片合成为一张并下载
本文实例为大家分享了微信小程序实现张图片合成为一张并下载的具体代码，供大家参考，具体内容如下
微信小程序海报
Page({
/**
*页面的初始数据
*/
data:{
imgUrl:"项目中图片地址",//图片链接
img:''//合成后图片路径
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
letthat=this;
wx.downloadFile({
url:'线上图片地址',
success(res){
//绘制背景海报到canvas
varpostersize=that.setCanvasSize(750);//动态设置画布大小
constctx=wx.createCanvasContext('shareCanvas')
ctx.drawImage(that.data.imgUrl,0,0,postersize.w,postersize.h)
varre=wx.getSystemInfoSync();
varscale=750/180;
varwidth=re.windowWidth/scale;
varheight=width
varleftscale=750/480;//180为left
varleft=re.windowWidth/leftscale;
vartopscale=750/880;//180为top
vartop=re.windowWidth/topscale;
ctx.drawImage(res.tempFilePath,left,top,width,height)
ctx.draw()
setTimeout(()=>{
//code_url=this.canvasToTempImage();
//获取临时缓存合成照片路径，存入data中
wx.canvasToTempFilePath({
canvasId:'shareCanvas',
success:function(res){
vartempFilePath=res.tempFilePath;
that.setData({
img:tempFilePath
})
console.log(tempFilePath)
},
fail:function(res){
console.log(res);
}
});
},1000);
}
})
},
/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){
},
/**
*生命周期函数--监听页面显示
*/
onShow:function(){
},
/**
*生命周期函数--监听页面隐藏
*/
onHide:function(){
},
/**
*生命周期函数--监听页面卸载
*/
onUnload:function(){
},
/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){
},
/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){
},
/**
*用户点击右上角分享
*/
onShareAppMessage:function(){
},
//适配不同屏幕大小的canvas
setCanvasSize:function(width){
varsize={};
try{
varres=wx.getSystemInfoSync();
varscale=750/width;//不同屏幕下canvas的适配比例；设计稿是750宽
//varscale=1
varwidth=res.windowWidth/scale;
varheight=res.windowHeight/scale;;
size.w=width;
size.h=height;
}catch(e){
//Dosomethingwhencatcherror
console.log("获取设备信息失败"+e);
}
returnsize;
},
//点击图片进行预览，长按保存分享图片
previewImg:function(e){
varimg=this.data.img;
let_this=this;
//保存二维码到相册
wx.saveImageToPhotosAlbum({
filePath:img,
success:function(res){
wx.showModal({
content:'保存成功',
confirmText:'确认',
showCancel:false,
success:function(res){
}
});
},
fail:function(res){
wx.showModal({
content:'保存失败',
confirmText:'确认',
showCancel:false,
success:function(res){
}
});
}
})
},
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。