/* pages/demo1/demo1.wxss */
page{
margin: 0;
padding: 0;
}
page canvas{
margin: 0;
padding: 0;
}
<!--pages/demo1/demo1.wxml-->
<page>
<canvas canvas-id="myCanvas" style="750rpx;height:1334rpx"/>
</page>
// pages/demo1/demo1.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
app.dataMode.systemInfo.windowwidth,
app.dataMode.systemInfo.windowWidth,
covers: [],
sharelist: [{
url: 'https://ccian.com/fenx1.jpg',
x: 0,
y: 0,
750,
height: 1334
},
{
url: 'https://ccian.com/fenx2.png',
x: 54 ,
y: 35 ,
181,
height: 69
},
{
url: 'https://ccian.com/fenx3.png',
x: 617,
y: 24,
94,
height: 94
},
{
url: 'https://ccian.com/fenx4.png',
x: 301,
y: 146,
143,
height: 34
},
{
url: 'https://ccian.com/fenx5.png',
x: 47,
y: 222,
88,
height: 77
},
{
url: 'https://ccian.com/fenx6.png',
x: 229,
y: 225,
103,
height: 73
},
{
url: 'https://ccian.com/fenx7.png',
x: 429,
y: 221,
81,
height: 81
},
{
url: 'https://ccian.com/fenx8.png',
x: 625,
y: 219,
67,
height: 85
},
{
url: 'https://ccian.com/fenx9.png',
x: 56,
y: 269,
77,
height: 75
},
{
url: 'https://ccian.com/fenx9.png',
x: 245,
y: 274,
77,
height: 75
},
{
url: 'https://ccian.com/fenx10.png',
x: 268,
y: 412,
214,
height: 34
},
{
url: 'https://ccian.com/fenx11.png',
x: 40,
y: 476,
210,
height: 140
},
{
url: 'https://ccian.com/fenx11.png',
x: 271,
y: 476,
210,
height: 140
},
{
url: 'https://ccian.com/fenx11.png',
x: 502,
y: 476,
210,
height: 140
},
{
url: 'https://ccian.com/fenx12.png',
x: 305,
y: 665,
142,
height: 34
},
{
url: 'https://ccian.com/fenx13.png',
x: 39,
y: 729,
102,
height: 101
},
{
url: 'https://ccian.com/fenx14.png',
x: 230,
y: 729,
102,
height: 101
},
{
url: 'https://ccian.com/fenx15.png',
x: 419,
y: 728,
102,
height: 101
},
{
url: 'https://ccian.com/fenx16.png',
x: 609,
y: 727,
102,
height: 101
},
{
url: 'https://ccian.com/fenx17.png',
x: 285,
y: 931,
179,
height: 34
},
{
url: 'https://ccian.com/fenx18.png',
x: 81,
y: 995,
99,
height: 99
},
{
url: 'https://ccian.com/fenx18.png',
x: 204,
y: 995,
99,
height: 99
},
{
url: 'https://ccian.com/fenx18.png',
x: 326,
y: 995,
99,
height: 99
},
{
url: 'https://ccian.com/fenx18.png',
x: 449,
y: 995,
99,
height: 99
},
{
url: 'https://ccian.com/fenx18.png',
x: 571,
y: 995,
99,
height: 99
},
{
url: 'https://ccian.com/fenx19.png',
x: 97,
y: 1139,
152,
height: 152
},
],
},
/**
* 生命周期函数--监听页面加载
*/
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')
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(26 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('乌拉拉', 517 * pixelRatio, 60 * pixelRatio)
ctx.setFontSize(20 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('人气摄影师', 506 * pixelRatio, 103 * pixelRatio)
ctx.setFontSize(34 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('看图', 60 * pixelRatio, 362 * pixelRatio)
ctx.fillText('传图', 249 * pixelRatio, 362 * pixelRatio)
ctx.fillText('开店', 437 * pixelRatio, 362 * pixelRatio)
ctx.fillText('领红包', 611 * pixelRatio, 362 * pixelRatio)
ctx.setFontSize(34 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('红包多多', 24 * pixelRatio, 879 * pixelRatio)
ctx.fillText('尊贵标识', 213 * pixelRatio, 879 * pixelRatio)
ctx.fillText('开店赚钱', 403 * pixelRatio, 879 * pixelRatio)
ctx.fillText('版权保护', 594 * pixelRatio, 879 * pixelRatio)
ctx.setFontSize(36 * pixelRatio)
ctx.setFillStyle("#FFFFFF")
ctx.fillText('长按识别小程序二维码', 322 * pixelRatio, 1224 * pixelRatio)
}
ctx.draw(true, setTimeout(function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
750,
1334,
destWidth: 750,
dest 1334,
canvasId: 'myCanvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
})
}
})
}, 1000))
wx.showToast({
title: '分享图片生成中...',
icon: 'loading',
duration: 1000
});
//const ctx = wx.createCanvasContext('myCanvas')
//drawImage(data.tupain[0], 0, 0, 750, 1334)
//ctx.drawImage(res.tempFilePaths[0], 54, 35, 181, 69)
//ctx.drawImage(res.tempFilePaths[0], 617, 24, 94, 94)
//ctx.drawImage(res.tempFilePaths[0], 301, 146, 143, 34)
//ctx.drawImage(res.tempFilePaths[0], 47, 222, 88, 77)
//ctx.drawImage(res.tempFilePaths[0], 229, 225, 103, 73)
//ctx.drawImage(res.tempFilePaths[0], 429, 221, 81, 81)
//ctx.drawImage(res.tempFilePaths[0], 625, 219, 67, 85)
//ctx.drawImage(res.tempFilePaths[0], 56, 269, 77, 75)
//ctx.drawImage(res.tempFilePaths[0], 245, 274, 77, 75)
//ctx.drawImage(res.tempFilePaths[0], 434, 274, 77, 75)
//ctx.drawImage(res.tempFilePaths[0], 623, 274, 77, 75)
//ctx.setFontSize(34)
//ctx.setFillStyle("#FFFFFF")
//ctx.fillText('看图', 60, 362)
//ctx.fillText('传图', 249, 362)
//ctx.fillText('开店', 437, 362)
//ctx.fillText('领红包', 611, 362)
//ctx.drawImage('../../image/c18.png', 268, 412, 214, 34)
//ctx.drawImage('../../image/c13.png', 40, 476, 210, 140)
//ctx.drawImage('../../image/c13.png', 40, 476, 210, 140)
//ctx.drawImage('../../image/c13.png', 271, 476, 210, 140)
//ctx.drawImage('../../image/c13.png', 502, 476, 210, 140)
//ctx.drawImage('../../image/c3.png', 305, 665, 142, 34)
//ctx.drawImage('../../image/c14.png', 39, 729, 102, 101)
//ctx.drawImage('../../image/c15.png', 230, 729, 102, 101)
//ctx.drawImage('../../image/c16.png', 418, 728, 102, 101)
//ctx.drawImage('../../image/c17.png', 609, 727, 102, 101)
//ctx.setFontSize(34)
//ctx.setFillStyle("#FFFFFF")
//ctx.fillText('红包多多', 24, 879)
//ctx.fillText('尊贵标识', 213, 879)
//ctx.fillText('开店赚钱', 403, 879)
//ctx.fillText('版权保护', 594, 879)
//ctx.drawImage('../../image/c4.png', 285, 931, 179, 34)
//ctx.drawImage('../../image/c2.png', 81, 995, 99, 99)
//ctx.drawImage('../../image/c2.png', 204, 995, 99, 99)
//ctx.drawImage('../../image/c2.png', 326, 995, 99, 99)
//ctx.drawImage('../../image/c2.png', 449, 995, 99, 99)
//ctx.drawImage('../../image/c2.png', 571, 995, 99, 99)
//ctx.drawImage('../../image/c20.png', 97, 1139, 152, 152)
//ctx.setFontSize(36)
//ctx.setFillStyle("#FFFFFF")
//ctx.fillText('长按识别小程序二维码', 322, 1224)
// ctx.draw(true, setTimeout(function() {
// wx.canvasToTempFilePath({
// x: 0,
// y: 0,
// 750,
// 1334,
// destWidth: 750,
// dest 1334,
// canvasId: 'myCanvas',
// success: function(res) {
// wx.saveImageToPhotosAlbum({
// filePath: res.tempFilePath,
// })
// }
// })
// }, 1000))
////将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
}
})