ctx.save()
ctx.beginPath()
ctx.arc(375 * pixelRatio, 168 * pixelRatio, 65 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)
ctx.setStrokeStyle('#f82a5e')
ctx.stroke()
ctx.clip()
ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 310 * pixelRatio, 103 * pixelRatio, 130 * pixelRatio, 130 * pixelRatio)
ctx.restore()
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
Height: app.dataMode.systemInfo.windowHeight,
app.dataMode.systemInfo.windowWidth,
covers: [],
sharelist: [{
url: 'https://ccian.com/1010-16.png',
x: 0,
y: 0,
750,
height: 1887
},
{
url: 'https://ccian.com/1010-7.png',
x: 103,
y: 463,
42,
height: 39
},
{
url: 'https://ccian.com/1010-9.png',
x: 264,
y: 463,
53,
height: 40
},
{
url: 'https://ccian.com/1010-3.png',
x: 437,
y: 463,
42,
height: 40
},
{
url: 'https://ccian.com/1010-5.png',
x: 608,
y: 463,
37,
height: 40
},
{
url: 'https://ccian.com/1010-12.png',
x: 64,
y: 1052,
105,
height: 105
},
{
url: 'https://ccian.com/1010-15.png',
x: 237,
y: 1052,
105,
height: 105
},
{
url: 'https://ccian.com/1010-14.png',
x: 409,
y: 1052,
105,
height: 105
},
{
url: 'https://ccian.com/1010-13.png',
x: 582,
y: 1052,
105,
height: 105
},
{
url: 'http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg',
x: 294,
y: 1588,
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() {
},
roundRect(ctx, x, y, w, h, r) {
// 开始绘制
ctx.beginPath()
// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
ctx.setFillStyle('transparent')
// ctx.setStrokeStyle('transparent')
// 绘制左上角圆弧
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
// 绘制border-top
ctx.moveTo(x + r, y)
ctx.lineTo(x + w - r, y)
ctx.lineTo(x + w, y + r)
// 绘制右上角圆弧
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
// 绘制border-right
ctx.lineTo(x + w, y + h - r)
ctx.lineTo(x + w - r, y + h)
// 绘制右下角圆弧
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
// 绘制border-bottom
ctx.lineTo(x + r, y + h)
ctx.lineTo(x, y + h - r)
// 绘制左下角圆弧
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
// 绘制border-left
ctx.lineTo(x, y + r)
ctx.lineTo(x + r, y)
ctx.fill()
// ctx.stroke()
ctx.closePath()
// 剪切
ctx.clip()
},
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')
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.save()
ctx.beginPath()
ctx.arc(375 * pixelRatio, 168 * pixelRatio, 65 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)
ctx.setStrokeStyle('#f82a5e')
ctx.stroke()
ctx.clip()
ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 310 * pixelRatio, 103 * pixelRatio, 130 * pixelRatio, 130 * pixelRatio)
ctx.restore()
ctx.save()
ctx.beginPath()
ctx.arc(611 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)
ctx.setStrokeStyle('#f82a5e')
ctx.stroke()
ctx.clip()
ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 566 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)
ctx.restore()
ctx.save()
ctx.beginPath()
ctx.arc(539 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)
ctx.setStrokeStyle('#f82a5e')
ctx.stroke()
ctx.clip()
ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 494 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)
ctx.restore()
ctx.save()
ctx.beginPath()
ctx.arc(461 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)
ctx.setStrokeStyle('#f82a5e')
ctx.stroke()
ctx.clip()
ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 416 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)
ctx.restore()
ctx.save()
ctx.beginPath()
ctx.arc(385 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)
ctx.setStrokeStyle('#f82a5e')
ctx.stroke()
ctx.clip()
ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 340 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)
ctx.restore()
ctx.save()
ctx.beginPath()
ctx.arc(311 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)
ctx.setStrokeStyle('#f82a5e')
ctx.stroke()
ctx.clip()
ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 266 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)
ctx.restore()
ctx.save()
ctx.beginPath()
ctx.arc(239 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)
ctx.setStrokeStyle('#f82a5e')
ctx.stroke()
ctx.clip()
ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 194 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)
ctx.restore()
ctx.save()
ctx.beginPath()
ctx.arc(161 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)
ctx.setStrokeStyle('#f82a5e')
ctx.stroke()
ctx.clip()
ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 116 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)
ctx.restore()
ctx.save()
ctx.beginPath()
ctx.arc(90 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)
ctx.setStrokeStyle('#f82a5e')
ctx.stroke()
ctx.clip()
ctx.drawImage('http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg', 45 * pixelRatio, 1369 * pixelRatio, 90 * pixelRatio, 90 * pixelRatio)
ctx.restore()
//圆形图片带边框完毕
//圆角图片开始
// ctx.save()
// ctx.beginPath()
// ctx.arc(90 * pixelRatio, 1414 * pixelRatio, 45 * pixelRatio, 0 * pixelRatio, 2 * Math.PI)
// ctx.clip()
// ctx.restore()
ctx.setFontSize(28 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('用户名', 335 * pixelRatio, 272 * pixelRatio)
ctx.setFontSize(36 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('我已完成', 304 * pixelRatio, 419 * pixelRatio)
ctx.setFontSize(28 * pixelRatio)
ctx.setFillStyle("#44289E")
ctx.fillText('看图', 97 * pixelRatio, 543 * pixelRatio)
ctx.setFontSize(28 * pixelRatio)
ctx.setFillStyle("#44289E")
ctx.fillText('传图', 263 * pixelRatio, 543 * pixelRatio)
ctx.setFontSize(28 * pixelRatio)
ctx.setFillStyle("#44289E")
ctx.fillText('开店', 431 * pixelRatio, 543 * pixelRatio)
ctx.setFontSize(28 * pixelRatio)
ctx.setFillStyle("#44289E")
ctx.fillText('领红包', 585 * pixelRatio, 543 * pixelRatio)
ctx.setFontSize(36 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('最近出售图片', 40 * pixelRatio, 670 * pixelRatio)
ctx.setFontSize(36 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('入门福利', 39 * pixelRatio, 984 * pixelRatio)
ctx.setFontSize(28 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('红包多多', 61 * pixelRatio, 1198 * pixelRatio)
ctx.setFontSize(28 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('尊贵标识', 234 * pixelRatio, 1198 * pixelRatio)
ctx.setFontSize(28 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('开店赚钱', 406 * pixelRatio, 1198 * pixelRatio)
ctx.setFontSize(28 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('版权保护', 579 * pixelRatio, 1198 * pixelRatio)
ctx.setFontSize(36 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('他们都在玩', 39 * pixelRatio, 1334 * pixelRatio)
ctx.setFontSize(30 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('长按识别小程序二维码', 226 * pixelRatio, 1803 * pixelRatio)
}
ctx.save()
this.roundRect(ctx, 42 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio, 10 * pixelRatio)
ctx.drawImage('http://pic17.photophoto.cn/20101026/0035035086911810_b.jpg', 42 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio)
ctx.restore()
ctx.save()
this.roundRect(ctx, 270 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio, 10 * pixelRatio)
ctx.drawImage('http://pic17.photophoto.cn/20101026/0035035086911810_b.jpg', 270 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio)
ctx.restore()
ctx.save()
this.roundRect(ctx, 500 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio, 10 * pixelRatio)
ctx.drawImage('http://pic17.photophoto.cn/20101026/0035035086911810_b.jpg', 500 * pixelRatio, 714 * pixelRatio, 210 * pixelRatio, 150 * pixelRatio)
ctx.restore()
ctx.draw(true, setTimeout(function() {
wx.canvasToTempFilePath({
x: 0,
y: 0,
750,
height: 1887,
destWidth: 750,
destHeight: 1887,
canvasId: 'myCanvas',
fileType: 'jpg',
success: function(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
})
}
})
}, 1000))
wx.showToast({
title: '分享图片生成中...',
icon: 'loading',
duration: 1000
});
}
})