bocai_supplyChain/pages/setAnnunciateImg/index.js

// pages/setAnnunciateImg/index.js
Page({
	/**
	 * 页面的初始数据
	 */
	data: {
		imgSrc: "https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/1emptyTem.png",
		imgList: [],
		jobList: [
			{
				money: 1,
				name: "一",
        age:'12-32岁'
			},
			{
				money: 22,
				name: "二",
        age:'12-32岁'
			},
			{
				money: 333,
				name: "三",
        age:'12-32岁'
			},
			{
				money: 4444,
				name: "四",
        age:'12-32岁'
			},

			{
				money: 55555,
				name: "五",
        age:'12-32岁'
			},
			{
				money: 666666,
				name: "六",
        age:'12-32岁'
			},
			{
				money: 7,
				name: "七",
        age:'12-32岁'
			},
			{
				money: 8,
				name: "八",
        age:'12-32岁'
			},
			{
				money: 9,
				name: "九",
        age:'12-32岁'
			},
		],
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		this.setImg();
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() {},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() {},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage1() {},
	changeTem(e) {
		let that = this;
		console.log(e);
		if (e.currentTarget.dataset.img) {
			this.setData({
				imgSrc: e.currentTarget.dataset.img == 1 ? "https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/1emptyTem.png" : "https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/1emptyTem1.png",
			});
			console.log(this.data.imgSrc);
		}

		this.setImg();
	},
	setImg() {
		let that = this;

		this.setData({
			imgList: [],
		});
		this.data.jobList.forEach((item) => {
			that.getCanvas(item).then((res) => {
				// console.log("123" + res);
				// console.log(that.data.imgList);`
				this.setData({
					imgList: that.data.imgList,
				});
			});
		});
	},
	getCanvas(item) {
		const that = this;
		return new Promise((resolve) => {
			var mycenter = 0; //文字左右居中显示
			var myheight = 0; //文字高度
			const query = wx.createSelectorQuery();
			query
				.select("#canvasId")
				.fields({ node: true, size: true })
				.exec((res) => {
					console.log(res);
					const canvas = res[0].node;
					const ctx = canvas.getContext("2d");
					new Promise(function (resolve) {
						// 绘制背景图片
						wx.getImageInfo({
							src: that.data.imgSrc, //网络图片,如果不行请换一个
							success(res) {
								// console.log(res);
								var width = res.width;
								var height = res.height;
								mycenter = width / 2;
								myheight = height;
								canvas.width = width;
								canvas.height = height;
								const img = canvas.createImage();
								// console.log(ctx);
								img.src = res.path;
								img.onload = () => {
									ctx.drawImage(img, 0, 0, width, height);
									resolve(true);
								};
							},
						});
					})
						.then(() => {
							// ctx.fillStyle = "#fff";
							// console.log(that.data.factoryBill.totalSalary.toString().length);
							// let steNumber = that.data.factoryBill.totalSalary.toString().length
							// ctx.fillRect(40, 168, steNumber * 30, 72);
							// ctx.fillText(that.data.factoryBill.totalSalary + "元", 40, 210);
              ctx.font = "600 40px Arial";
							ctx.textAlign = "center";
							ctx.fillStyle = "#1b71ff";
							ctx.fillText(item.name, 180, 110);
							ctx.font = "500 40px Arial";
							ctx.textAlign = "center";
							ctx.fillStyle = "#1890ff";
							ctx.fillText(item.money + "元/天", 180, 210);
              ctx.font = "500 40px Arial";
							ctx.textAlign = "center";
							ctx.fillStyle = "#1890ff";
							ctx.fillText(item.age, 180, 300);
							// ctx.fillText(item.money + "元", 40, 110);
							// ctx.font = "600 120px Arial";
							// ctx.textAlign = "left";
							// ctx.fillStyle = "#fff";
							// ctx.fillText(item.name, 80, 120);
						})
						.then(function () {
							wx.canvasToTempFilePath({
								canvas: canvas,
								success(res) {
									// console.log(res);
									that.data.imgList.push(res.tempFilePath);

									// console.log(that.data.imgList);
									// that.setData({
									// 	canvasImg: res.tempFilePath,
									// 	// base64: canvas.toDataURL(),
									// });
									resolve();
									// console.log(that.data.canvasImg);
								},
							});
						})
						.catch((err) => {
							console.log(err);
						});
				});
		});
	},
});