<page>
<canvas canvas-id="myCanvas" style="750rpx;height:1334rpx"/>
</page>
// pages/demo1/demo1.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
Height: app.dataMode.systemInfo.windowHeight,
app.dataMode.systemInfo.windowWidth,
covers: [],
sharelist: [{
url: 'http://pic10.photophoto.cn/20090103/0033034092630078_b.jpg',
x: 325,
y: 70,
100,
height: 100
},
{
url: 'http://pic10.photophoto.cn/20090103/0033034092630078_b.jpg',
x: 80,
y: 316,
590,
height: 392
},
{
url: 'http://pic10.photophoto.cn/20090103/0033034092630078_b.jpg',
x: 295,
y: 911,
160,
height: 160
},
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.getQaImageInfo(0)
},
/**
* 生命周期函数--监听页面初次渲染完成
* number dx图像的左上角在目标 canvas 上 x 轴的位置number dy图像的左上角在目标 canvas 上 u 轴的位置
* number dWidth在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放number dwidth在目标画布上绘制图像的高度，允许对绘制的图像进行缩放
* number x绘制文本的左上角 x 坐标位置number y绘制文本的左上角 y 坐标位置
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
getQaImageInfo: function(i) {
var that = this;
if (i < this.data.sharelist.length) {
console.log(that.data.sharelist[i].url)
wx.getImageInfo({
src: that.data.sharelist[i].url,
success: function(res) {
var covers = that.data.covers
covers.push(res.path);
console.log(res.path);
that.setData({
covers: covers
})
that.getQaImageInfo(i + 1)
},
fail: function(res) {
wx.hideLoading()
wx.showToast({
title: '获取图片失败',
icon: 'none',
image: '/image/error.png'
})
}
})
} else {
that.drawImage();
}
},
drawImage: function() {
var width = this.data.width;
var w = this.data.width / 2;
var height = this.data.Height;
var pixelRatio = width / 750;
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('#D6564D')
ctx.fillRect(0 * pixelRatio, 0 * pixelRatio, 750 * pixelRatio, 1344 * pixelRatio)
ctx.setFillStyle('white')
ctx.fillRect(40 * pixelRatio, 276 * pixelRatio, 670 * pixelRatio, 1033 * pixelRatio)
for (var i = 0; i <= this.data.sharelist.length - 1; i++) {
ctx.drawImage(
this.data.covers[i],
this.data.sharelist[i].x * pixelRatio,
this.data.sharelist[i].y * pixelRatio,
this.data.sharelist[i].width * pixelRatio,
this.data.sharelist[i].height * pixelRatio
)
ctx.setFontSize(28 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('偷月亮的meOw', 278 * pixelRatio, 219 * pixelRatio)
ctx.setFontSize(38 * pixelRatio)
ctx.setFillStyle("#333333")
ctx.fillText('发起了一个抽奖活动', 80 * pixelRatio, 762 * pixelRatio)
ctx.setFontSize(30 * pixelRatio)
ctx.setFillStyle("#BBBBBB")
ctx.fillText('02月16日 11:30 自动开奖', 80 * pixelRatio, 817 * pixelRatio)
ctx.fillText('长按识别小程序，参与抽奖', 196 * pixelRatio, 1125 * pixelRatio)
ctx.fillText('抽奖说明：祝你好运气，中奖的朋友记得在', 81 * pixelRatio, 1214 * pixelRatio)
ctx.fillText('联系信息留下你的微信号哦！', 80 * pixelRatio, 1254 * pixelRatio)
//定义直线的起点坐标为(10,10)
ctx.setLineDash([3, 3]);
ctx.moveTo(41 * pixelRatio, 875 * pixelRatio);
//定义直线的终点坐标为(50,10)
ctx.lineTo(710 * pixelRatio, 875 * pixelRatio);
//沿着坐标点顺序的路径绘制直线
ctx.lineWidth = 1 * pixelRatio;
ctx.strokeStyle = "#DDDDDD";
ctx.stroke()
}
ctx.draw(true, setTimeout(function() {
wx.canvasToTempFilePath({
x: 0,
y: 0,
750,
height: 1334,
destWidth: 750,
destHeight: 1334,
canvasId: 'myCanvas',
fileType: 'jpg',
success: function(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
})
}
})
}, 1000))
wx.showToast({
title: '分享图片生成中...',
icon: 'loading',
duration: 1000
});
}
})