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,
width: app.dataMode.systemInfo.windowWidth,
covers: [],
sharelist: [{
url: 'https://ccian.com/1010-16.png',
x: 0,
y: 0,
width: 750,
height: 1887
},
{
url: 'https://ccian.com/1010-7.png',
x: 103,
y: 463,
width: 42,
height: 39
},
{
url: 'https://ccian.com/1010-9.png',
x: 264,
y: 463,
width: 53,
height: 40
},
{
url: 'https://ccian.com/1010-3.png',
x: 437,
y: 463,
width: 42,
height: 40
},
{
url: 'https://ccian.com/1010-5.png',
x: 608,
y: 463,
width: 37,
height: 40
},
{
url: 'https://ccian.com/1010-12.png',
x: 64,
y: 1052,
width: 105,
height: 105
},
{
url: 'https://ccian.com/1010-15.png',
x: 237,
y: 1052,
width: 105,
height: 105
},
{
url: 'https://ccian.com/1010-14.png',
x: 409,
y: 1052,
width: 105,
height: 105
},
{
url: 'https://ccian.com/1010-13.png',
x: 582,
y: 1052,
width: 105,
height: 105
},
{
url: 'http://img.zcool.cn/community/014263554468cc0000019ae9262bb8.jpg',
x: 294,
y: 1588,
width: 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,
width: 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
});
}
})