小程序分享生成图片
首先先在前台页面生成一个能够放图片cnavas的框，然后JS获取到各种信息，进行绘图（注意：绘图信息里只要有字段信息没有
或者错误），开发工具 就会显示透明版。放到cnavas掩藏着。点击生成的时候，显示出来。
WXML
js onLoad: function (e) {
wx.setNavigationBarTitle({
title: wx.getStorageSync('companyinfo').name,
})
var that = this;
if (this.data.id > 0) {
var id = this.data.id;
} else {
var id = e.id;
this.data.id = e.id;
}
//初始化导航数据
app.util.request({
'url': ' ',
data: { id: id },
success: function (res) {
if (!res.data.message.errno) {
var houseDetail = R_htmlToWxml.html2json(res.data.data.list.content);
var articleId = ' /';
that.data.title = res.data.data.list.housename;
that.data.address = res.data.data.list.houseaddress;
that.data.houseprice = res.data.data.list.houseprice;
that.data.piclist =res.data.data.piclist;
that.data.housecase = res.data.data.housecase;
that.data.houseareaid = res.data.data.list.houseareaid;
that.data.companyinfo = wx.getStorageSync('companyinfo').name;
that.data.productspecial = res.data.data.list.productspecial;
that.data.areaname = res.data.data.list.areaname;
wx.setNavigationBarTitle({
title: that.data.title + '-' + wx.getStorageSync('companyinfo').name,
})
that.setData({
data: res.data.data.list,
})
}
},
complete: function () {
wx.hideNavigationBarLoading(); //完成停止加载
wx.stopPullDownRefresh();
}
});//通过后台获取二维码
app.util.request({
'url': ' ',
data: {
appid: " ",
appsecret: " ",
},
success: function (res) {
if (!res.data.errno) {
that.data.code = res.data;
var promise1 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: that.data.code,
success: function (res) {
console.log(res)
resolve(res);
}
});
})
var promise2 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: that.data.thumb,
success: function (res) {
console.log(res)
resolve(res);
}
});
})
Promise.all([
promise1, promise2
]).then(res => {
console.log(res)
const ctx = wx.createCanvasContext('shareImg')
//主要就是计算好各个图文的位置 //下面都是从后台获取到的数据，如果不需要的话，可以直接写文字。
ctx.setFillStyle('#ffffff')
ctx.fillRect(0, 0, 700, 710)
ctx.drawImage(res[1].path, 0, 0, 700, 400)
ctx.drawImage(res[0].path, 345, 500, 180, 160)
// ctx.setTextAlign('center')
ctx.setFontSize(30)
ctx.setFillStyle('#000000')
ctx.setTextAlign('center')
ctx.fillText(that.data.title, 280, 30,500)
ctx.setFillStyle('#ffffff')
ctx.setTextAlign('center')
ctx.fillText(that.data.title, 285, 30, 500)
ctx.setFillStyle('#000000')
ctx.setTextAlign('left')
ctx.fillText(that.data.productspecial, 0, 450,500)
ctx.fillText(that.data.areaname, 0, 500, 500)
ctx.fillText(that.data.housetypename, 100, 500, 500)
ctx.setFillStyle('red')
ctx.setFontSize(40)
ctx.fillText(that.data.houseprice, 0, 550,500)
ctx.fillText("元/㎡", 130, 550, 500)
ctx.setFontSize(30)
ctx.fillText("长按识别", 350, 500, 500)
ctx.setFontSize(24)
ctx.setTextAlign('center')
ctx.setFillStyle('#000000')
ctx.fillText(that.data.companyinfo, 280, 700)
ctx.stroke()
ctx.draw()
})
}
}
});
},
closemsg: function (e) {
this.data.showmsg = true;
this.setData({
showmsg: this.data.showmsg
})
},
/**
* 生成分享图
*/
share: function () {
var that = this
wx.showLoading({
title: '努力生成中...'
})
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 545,
height: 771,
destWidth: 545,
destHeight: 771,
canvasId: 'shareImg',
success: function (res) {
console.log(res.tempFilePath);
that.setData({
prurl: res.tempFilePath,
hidden: false
})
wx.hideLoading()
},
fail: function (res) {
console.log(res)
}
})
},
/**
* 保存到相册
*/
save: function () {
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.prurl,
success(res) {
wx.showModal({
content: '图片已保存到相册',
showCancel: false,
confirmText: '好的',
confirmColor: '#72B9C3',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
that.setData({
hidden: true
})
}
}
})
}
})
},
closetype: function (e) {
this.data.hidden = true;
this.setData({
hidden: this.data.hidden
})
},wxsscanvas{
position: fixed;
top: 0;
z-index:-10;
left: 1000px;
margin-top: 1000px;
}
.preview {
width: 100%;
height: 100%;
background: rgba(0,0,0,.9);
position: absolute;
z-index: 2;
}
.preview .tu{
width: 70%;
position: absolute;
top: 10%;
left: 15%;
z-index: 3;
border: 1px dashed #fff;
}
.preview .save{
width: 40%;
position: absolute;
bottom: 177rpx;
left: 51%;
}
.preview .resave{
width: 40%;
position: absolute;
bottom: 177rpx;
left: 7%;
}
.preview .close{
position: absolute;
top: 3%;
left: 48%;
width: 8%;
height: 5%;
z-index: 999;
}