<canvas id="canvas" type="2d" canvas-id="canvas" style="height:{{canvasHeight}}rpx"></canvas> <canvas id="canvas1" type="2d" canvas-id="canvas1" style="height:{{canvasHeight}}rpx"></canvas> // 画布绘制&初始化画布 drawCanvas(dom, name) { return new Promise((resolve, reject) => { const query = wx.createSelectorQuery().in(this) query.select(dom) .fields({ node: true, size: true }) .exec(res => { const data = res[0]; let canvas = data.node this._data[name] = canvas; const ctx = canvas.getContext('2d') canvas.width = data.width * dpr canvas.height = data.height * dpr // 绘制前清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.scale(dpr, dpr) resolve() console.log('init canvas', canvas.width, canvas.height) }) }) }, // 绘制内容 async drawContent(canvas, type = 1) { console.log('drawing content') console.time() const { checkListMap } = this._data; const ctx = canvas.getContext('2d') ctx.fillStyle = '#121C60'; ctx.fillRect(0, 0, canvas.width, canvas.height); await this.drawImage(canvas, ctx, '/assets/workbench/w-joint-research-banner.png', 0, 0, 750 / ratio, 308 / ratio) this._data.yHeight = 308; this.drawTitle(ctx, `03.05 ～ 03.11｜江浙｜电新 第${type}张`) for (let key in checkListMap) { const { day, week, data } = checkListMap[key] this.drawTag(ctx, `${day} ${week}`, this._data.yHeight + 30); await data.forEach(item => { const { dayShow: time, record_name: title, other } = item; this.drawCard(ctx, { time, title, address: other.address, person: '', discuss: '' }, this._data.yHeight + 30, type) }) } this.drawFooter(ctx, this._data.yHeight) console.log('draw canvas', checkListMap) console.timeEnd(); console.log('draw content end') }, // 绘制图片 draw(dom, id) { return new Promise((resolve, reject) => { const { canvasHeight: cnavasheight } = this.data const { yHeight, canvasHeight } = this._data // const dpr = wx.getSystemInfoSync().pixelRatio // 是否超过一屏 const isBeyond = yHeight > canvasHeight const height = isBeyond ? cnavasheight : canvasHeight // console.log('height', height, dom.height, dom.height / dpr) wx.canvasToTempFilePath({ canvas: dom, // canvasId: id, width: 750 / ratio, height: 3000, // destWidth: dom.width, // destHeight: dom.height, success: (res) => { resolve(res.tempFilePath) wx.getImageInfo({ src: res.tempFilePath, success: (res) => { console.log('getImageInfo', res) } }) console.log('success', res) }, fail: (err) => { reject(err) }, complete: (res) => { // resolve(res.tempFilePath) console.log('complete', res) } }, this) }) }, // 生成海报 generatePoster() { wx.showLoading({ title: '生成中...', }) // this.draw(this._data.canvas, 'canvas') console.log('----------------') Promise.all([this.draw(this._data.canvas1, 'canvas1')]).then(res => { wx.previewImage({ current: res[0], // 当前显示图片的http链接 urls: res // 需要预览res.tempFilePath的图片http链接列表 }) wx.hideLoading() }) }, [图片]

[图片][图片]