最新canvas

/* 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))

////将生成好的图片保存到本地，需要延迟一会，绘制期间耗时

}

})