1.js代码
// pages/nav/nav.js
Page({
/**
* 页面的初始数据
*/
data: {
nav: ['全部', '水果蔬菜', '家电', '图书', '生活用品', '测试', '还是测试', '依然是测试'],
// 当前项目
current: 2,
// 滚动栏滚动距离
scrollLeft: 0,
// 窗体宽度
windowWidth: 0,
canvasImg: '',
share: false, //是否分享
base64Qr: '', //二维码接口获取的base64的图片
drawing: false, //是否绘制海报中
loading: false, //点击分享时,是否绘制海报中
sourceUrl1: "https://purchasing-miniapp-cdn.a2milk.com/a2/img/invitenow/share1.png", //网络图片
sourceUrl: "http://campaigncdn.herdsric.com/a2/adjust/100.jpg", //网络图片
sizeHeight: '',
newheight: '',
pixelRatio: '',
windowH: '',
windowW: '',
tempNum: '',
testTop: ''
},
onLoad: function (options) {
// 设置标题
wx.setNavigationBarTitle({
title: '导航栏案例',
});
// 获取窗体宽度
wx.getSystemInfo({
success: (result) => {
this.setData({
windowW: result.windowWidth,
windowH: result.windowHeight,
windowWidth: result.windowWidth,
pixelRatio: result.pixelRatio
})
},
})
// this.shareShow()
},
//显示遮罩层
shareShow() {
this.setData({
canvasImg: '',
drawing: true
})
setTimeout(() => {
this.setShareCanvas(); // 分享绘图
}, 800)
// wx.showLoading({
// title: '海报生成中',
// })
},
setShareCanvas() {
const that = this;
const query = wx.createSelectorQuery();
query.select('#shareCanvas')
.fields({
node: true,
size: true
}).exec((res) => {
const canvas = res[0].node //拿到canvas对象
that.setData({ //这里保存canvas对象是因为下面保存相片要用这个对象
canvas
})
const ctx = canvas.getContext('2d') //返回用于在画布上绘图的环境
const dpr = that.data.pixelRatio //拿到设备像素比
canvas.width = res[0].width * dpr //缩放画布
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
// 设置背景为白色
ctx.fillStyle = "#fff";
new Promise(function (resolve) {
//2、绘制图片及文字
const imggood = canvas.createImage()
imggood.src = that.data.sourceUrl
imggood.onload = (e) => {
var newheight = that.fitSize(240) * imggood.height / imggood.width
that.setData({
newheight: newheight
})
if (newheight > that.fitSize(240)) {
newheight = that.fitSize(240)
that.setData({
heightNew: 1,
newheight: newheight
})
console.log(that.data.heightNew, newheight, '00000')
}
let cutHeight = imggood.height
if (imggood.height > imggood.width) {
cutHeight = imggood.width
}
const tempNum = 20
that.setData({
tempNum: tempNum
})
ctx.fillRect(0, 0, that.fitSize(275), that.fitSize(78) + newheight + tempNum + that.fitSize(48) + tempNum + that.fitSize(48))
console.log(that.fitSize(78) + newheight + tempNum + that.fitSize(48) + tempNum + that.fitSize(48), '0')
that.setData({
sizeHeight: that.fitSize(78) + newheight + tempNum + that.fitSize(48) + tempNum + that.fitSize(48)
})
ctx.drawImage(imggood, 0, 0, imggood.width, cutHeight, that.fitSize(17), that.fitSize(78), that.fitSize(240), newheight);
let str = '获取a2™品牌素材,解锁专属会员福利!'
let chr = str.split("");
let temp = "";
let row = [];
ctx.font = `${parseInt(that.fitSize(12))}px FZabj-small`;
ctx.fillStyle = '#4E4E4E';
for (let a = 0; a < chr.length; a++) {
if (ctx.measureText(temp).width < (that.fitSize(136))) {
temp += chr[a];
} else {
a--;
row.push(temp);
temp = "";
}
}
row.push(temp);
if (row.length > 2) {
let rowCut = row.slice(0, 2);
let rowPart = rowCut[1];
let test = "";
let empty = [];
for (let a = 0; a < rowPart.length; a++) {
if (ctx.measureText(test).width < (that.fitSize(140))) {
test += rowPart[a];
} else {
break;
}
}
empty.push(test);
let group = empty[0] + "..." //这里只显示两行,超出的用...表示
rowCut.splice(1, 1, group);
row = rowCut;
}
let testTop = 13
that.setData({
testTop: testTop
})
//修改文字距离图片的距离
for (let b = 0; b < row.length; b++) {
ctx.fillText(row[b], that.fitSize(32), that.fitSize(78) + newheight + that.data.tempNum + b * 17 + that.fitSize(testTop));
}
resolve(true);
}
}).then(function () {
return new Promise(function (resolve) {
const imgbg = canvas.createImage()
imgbg.src = 'https://purchasing-miniapp-cdn.a2milk.com/a2/img/adjust/hbwz1.png'
imgbg.onload = (e) => {
ctx.drawImage(imgbg, that.fitSize(64), that.fitSize(22), that.fitSize(150), that.fitSize(39))
resolve(true);
}
})
}).then(function () {
return new Promise(function (resolve) {
//绘制小程序二维码图片
const imgqrcode = canvas.createImage()
imgqrcode.src = 'https://campaigncdn.herdsric.com/a2/adjust/qrCode.jpg'
imgqrcode.onload = (e) => {
console.log(that.data.newheight)
//绘制二维码
ctx.drawImage(imgqrcode, that.fitSize(192), that.fitSize(78) + that.data.newheight + that.data.testTop, that.fitSize(48), that.fitSize(48))
resolve(true);
}
})
}).then(function () {
return new Promise(function (resolve) {
const radius = 6; // 设置半径为10px
ctx.moveTo(that.fitSize(17), that.fitSize(78))
ctx.lineTo(that.fitSize(257), that.fitSize(78))
let boxLine = that.fitSize(78) + that.fitSize(48) + that.data.newheight + that.data.testTop + that.fitSize(15)
// 右下角弧度
ctx.arcTo(that.fitSize(257), boxLine, that.fitSize(78), boxLine, radius); // 从起始点到结束点绘制圆弧路径
ctx.lineTo(that.fitSize(257) - radius, boxLine)
// 左下角弧度
ctx.arcTo(that.fitSize(17), boxLine, that.fitSize(17), 100, radius); // 从起始点到结束点绘制圆弧路径
ctx.lineTo(that.fitSize(17), boxLine - radius)
ctx.lineTo(that.fitSize(17), that.fitSize(78))
// 设置边框的样式和颜色
ctx.lineWidth = 0.2; // 边框宽度
ctx.strokeStyle = 'gray'; // 边框颜色
// 设置阴影属性并绘制边框
ctx.shadowColor = '#000'; // 阴影颜色
ctx.shadowBlur = 10; // 阴影模糊半径
ctx.shadowOffsetX = -5; // 阴影水平偏移
ctx.shadowOffsetY = 6; // 阴影垂直偏移
ctx.stroke()
resolve(true);
})
}).then(function () {
return new Promise(function (resolve) {
//绘制底部文字
const imgWz = canvas.createImage()
imgWz.src = 'https://purchasing-miniapp-cdn.a2milk.com/a2/img/adjust/hbwz2.png'
imgWz.onload = (e) => {
ctx.drawImage(imgWz, that.fitSize(80), that.fitSize(78) + that.data.newheight + 4 + that.data.testTop + that.fitSize(53) + that.data.tempNum, that.fitSize(115.6), that.fitSize(28.8))
resolve(true);
}
})
}).then(function () {
return new Promise(function (resolve) {
console.log('绘制完毕,转换成图片', canvas)
that.transferCanvasToImage(canvas)
resolve(true);
})
}).catch((err) => {
that.setData({
})
})
})
},
transferCanvasToImage(canvas) {
const that = this;
wx.canvasToTempFilePath({
canvas: canvas,
x: 0,
y: 0,
width: (that.fitSize(275)),
height: (that.data.sizeHeight),
success(res) {
console.log('canvas分享图片地址', res.tempFilePath)
that.data.loading && wx.hideLoading()
that.setData({
canvasImg: res.tempFilePath
})
wx.hideLoading()
},
fail: (err) => {
console.log(err, '转换失败')
}
})
},
//点击图片进行预览,长按保存分享图片
preImg: function (e) {
var img = this.data.canvasImg
wx.previewImage({
current: img, // 当前显示图片的http链接
urls: [img] // 需要预览的图片http链接列表
})
},
fitSize(coordinate) {
let that = this;
let windowW = that.data.windowW; //这个windowWidth指的是该设备宽度,可以onLoad监听页面加载中获取
let v = 375 / windowW; //375是设计稿的大小,得到的v值是:设计稿和设备宽度的比例关系,也可理解成在设计稿的大小基础上放大或缩小的倍数
return coordinate / v; //返回的是当前坐标值或者大小与v的比例
},
})
2.wxml代码
<view class="canvas-box" wx:if="{{drawing}}">
<view class="card-cancle" >
<canvas type="2d" id="shareCanvas" canvas-id="Canvas" style="width: {{windowW}}px; height: {{ windowH }}px;position:fixed;top:9999px"></canvas>
<image src="{{canvasImg}}" bindtap="preImg" show-menu-by-longpress class="share-image" mode="widthFix" ></image>
</view>
</view>
<view bindtap="shareShow">生成海报</view>
3.wxss代码
.canvas-box{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 10;
background: rgba(0, 0, 0, .7);
}
.card-cancle {
/* margin-top: 276rpx; */
width: 540rpx;
height: 844rpx;
/* background: #FFFFFF; */
border-radius: 8rpx;
margin: 0 auto;
margin-top: 310rpx;
}
.share-image {
width: 540rpx;
height: 900rpx;
padding: 1px;
/* margin-top: 90px; */
}