前⾔：
我的分享海报是弹框，可根据⾃⼰要求写成页⾯，原理都是⼀样的，背景图是前期测试的，效果是OK的，真机测试⼿机也是显⽰的。效果图：
wxml:
<!--⽣成海报-->
<view class='imagePathBox' hidden="{{maskHidden == false}}">
<image src="{{imagePath}}"class='shengcheng'></image>
<button class='baocun' bindtap='baocun'>保存⾄相册，分享到朋友圈</button>
</view>
<view hidden="{{maskHidden == false}}"class="mask"></view>
<view class="canvas-box">
<canvas canvas-id="mycanvas"/>
</view>
</view>
js:
// pages/my/my.js
import api from'../../utils/http'
甲天下的意思const app =getApp()
Page({
/**
* 页⾯的初始数据
*/
data:{
userInfo:'',
domainURL:"",//图⽚线上地址
info:"",
imgList:'',
evalatImage:'',
bgBanner:'',//背景
imagePath:"",//图⽚
maskHidden:false,//开关
qrcode_image:'',//⼆维码
qrcode_image:'',//⼆维码
headimgurl:'',//头像
nickName:''//名称
},
/
**
* ⽣命周期函数--监听页⾯加载
*/
onLoad:function(options){
this.setData({
userInfo: wx.getStorageSync("userInfo"),
headimgurl: wx.getStorageSync("userInfo").headimgurl,
nickName: wx.getStorageSync("userInfo").nickName,
domainURL: app.globalData.domainURL
})
var that =this;
api.post("/app/web/poster/list").then(res =>{
de ==200){
//domainURL：图⽚拼接的线上地址，可根据⾃⾝情况修改
that.setData({
bgBanner: that.data.domainURL + res.data[0].imageUri,
evalatImage: that.data.domainURL + res.data[0].imageUri, })
//console.log(that.data.bgBanner)
}
}).catch(err =>{
//console.log(err)
})
that.qrcode_image();
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady:function(){
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow:function(){
this.setData({
maskHidden:false
});
},
//点击⽣成海报
formSubmit:function(e){
var that =this;
wx.showToast({
title:'海报⽣成中...',
icon:'loading',
duration:1000
});
setTimeout(function(){
// wx.hideToast()
that.setData({
maskHidden:true
});
},1000);
},
//将canvas转换为图⽚保存到本地，然后将图⽚路径传给image图⽚的src
/
/将canvas转换为图⽚保存到本地，然后将图⽚路径传给image图⽚的src
createNewImg:function(){
var that =this;
console.log(that.data.bgBanner)
var context = wx.createCanvasContext('mycanvas');
context.clearRect(0,0,375,660);// （X轴坐标，Y轴坐标，宽，⾼）
src: that.data.bgBanner,
success(res){
//console.log(res)
context.drawImage(res.path,0,0,375,660);// （X轴坐标，Y轴坐标，宽，⾼）
context.setFillStyle("#fff")
// context.fillRect(0, 0, 375, 660)// （X轴坐标，Y轴坐标，宽，⾼）
context.save();
var path = that.data.evalatImage;
context.drawImage(path,0,0,375,660);// （X轴坐标，Y轴坐标，宽，⾼）
var path2 = that.data.qrcode_image;
// ⾥⾯继续添加图⽚的话必须要⽤wx.getImageInfo
src: that.data.headimgurl,
success(nav){
that.setData({
headimgurl: nav.path
})
console.log(that.data.headimgurl,1, nav.path)
var avatarurl_width =60;//绘制的头像宽度
var avatarurl_heigth =60;//绘制的头像⾼度
var avatarurl_x =160;//绘制的头像在画布上的位置
var avatarurl_y =115;//绘制的头像在画布上的位置
context.save();
context.beginPath();
context.arc(avatarurl_width /2+ avatarurl_x, avatarurl_heigth /2+ avatarurl_y, avatarurl_width /2,0, Math.PI*2,false); context.clip();
context.drawImage(nav.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
朴有天朴嘉熙context.draw(context);
},
fail(err){
//console.log(err)
}
});
var titl = that.data.nickName;
context.setFontSize(18);
context.setFillStyle('#333');
context.setTextAlign('left');
context.font ='normal bold 18px sans-serif';
context.fillText(titl,160,200);
context.stroke();
context.save();
//console.log("海报底部⼆维码" + path2);
//绘制头像
context.save();//保存之前的画布设置
context.beginPath();
context.arc(90,540,50,0,2* Math.PI);
context.setStrokeStyle("#ffe200");
context.clip();//裁剪上⾯的圆形
context.drawImage(path2,40,490,100,100);// （X轴坐标，Y轴坐标，宽，⾼）
context.drawImage(path2,40,490,100,100);// （X轴坐标，Y轴坐标，宽，⾼） store();
context.closePath();
console.log(path2)
context.save();//保存之前的画布设置
// context.draw(true); //true表⽰保留之前绘制内容
context.draw(context);
},
fail(err){
//console.log(err)
}
});
//将⽣成好的图⽚保存到本地，需要延迟⼀会，绘制期间耗时
setTimeout(function(){
wx.canvasToTempFilePath({
canvasId:'mycanvas',
success:function(res){
var tempFilePath = pFilePath;
that.setData({
imagePath: tempFilePath
});
},
fail:function(res){
//console.log(res);
}
});
},1000);
},
//点击保存到相册
蜘组词俩字baocun:function(){
var that =this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success(res){
wx.showModal({
content:'图⽚已保存到相册，赶紧晒⼀下吧~',
showCancel:false,
confirmText:'好的',
confirmColor:'#333',
success:function(res){
firm){
//console.log('⽤户点击确定');
/* 该隐藏的隐藏 */
that.setData({
maskHidden:false
})
}
},
fail:function(res){
//console.log(11111)
}
})
}
})
},
qrcode_image:function(){
let that =this;
url:'api.weixin.qq/cgi-bin/token',
data:{
grant_type:'client_credential',
appid:'XXXXXX',//不能缺少，否则⼆维码出不来
appid:'XXXXXX',//不能缺少，否则⼆维码出不来
secret:'XXXXXX'//不能缺少，否则⼆维码出不来
},
解放牌汽车success:function(res){
虾小米url:'api.weixin.qq/wxa/getwxacodeunlimit?access_token='+ res.data.access_token, data:{
"path":"/pages/login/login",//默认跳转到主页:pages/index/index，可指定
"width":200,
"scene":"evaId="+ that.data.id,//携带的参数
},
responseType:'arraybuffer',// 这⾏很重要，转为⼆进制数组
header:{
'content-type':'application/json;charset=utf-8'
},
method:'POST',
success(res){
//console.log(res)
//转为base64
let bin64 = wx.arrayBufferToBase64(res.data);
that.setData({
//base 64设置到页⾯上
qrcode_image:"data:image/png;base64,"+ bin64
});
let fileManager = wx.getFileSystemManager();//获取⽂件管理器
let filePath = wx.env.USER_DATA_PATH+'/code.jpg';//设置临时路径
fileManager.writeFile({//获取到的数据写⼊临时路径
filePath: filePath,//临时路径
// encoding: 'binary', //编码⽅式，⼆进制
data: res.data,//请求到的数据
success:function(res){
// //console.log(res)
src: filePath,
success(res){
//console.log(res)
that.setData({
qrcode_image: res.path
});
}
})
//console.log(filePath)
},
fail:function(res){
//console.log(res)
},
});
}
})
}
垃圾短信投诉})
}
})
wxss:
/*海报 */
.imagePathBox{
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
发布评论