个人中心 | 微信开放社区

供参考 wxml <canvas type="2d" style="{{canvasStyle}}" id="shareCanvas" canvas-id="shareCanvas"></canvas> <view>   <view class="help-title">长按图片, 保存到相册「发布到朋友圈」</view>   <view class="share-image">     <image  mode="widthFix" src="{{imagePath}}" bindtap="onImageTap"></image>   </view> </view> JS // 已这里定义的宽高为基准调整图片生成 const scale = 2 const canvasWidth = 300 const canvasHeight = 400 Page({ /** * 页面的初始数据 */ data: { canvasId: 'shareCanvas', canvas: null, // 画布实例 dpr: wx.getSystemInfoSync().pixelRatio * scale, // 缩放比例, 画布大小的缩放 height: canvasWidth * scale, // 图片高度 width: canvasHeight * scale, // 图片宽度 coverHeight: 225 * scale, // 封面图高度 coverWidth: 300 * scale, // 封面图宽度 canvasStyle: `width: ${canvasWidth * scale}px;height: ${canvasHeight * scale}px;background:#f8f8f8;position: fixed; top: ${-(canvasHeight * scale) - 200}px;`, imagePath: '', coverUrl: 'https://[网络图片地址].jpg' }, // 初始化 initCanvas: function () { const {canvasId } = this.data wx.createSelectorQuery() .select(`#${canvasId}`) .fields({ node: true, size: true, }) .exec(this.createCanvas.bind(this)) }, // 创建画布 async createCanvas (res) { const that = this const { width, height, node } = res[0] const { dpr } = this.data const canvas = node this.setData({ canvas }) // 缩放 canvas.width = width * dpr canvas.height = height * dpr const ctx = canvas.getContext('2d') ctx.scale(dpr, dpr) // 绘制背景 ctx.fillStyle="#f8f8f8"; ctx.fillRect(0, 0, width, height) ctx.font = `${16 * scale}px "PingFangSC-Regular"` // 1. 绘制封面 await this.drawPoster({ ctx, canvas }) // 2. 绘制标题 this.drawTitle({ ctx }) // 生成图片 wx.canvasToTempFilePath({ canvas: canvas, fileType: 'png', success(res) { that.setData({ "imagePath": res.tempFilePath }) }, fail(e){ console.log(e) }, complete() { console.log('complete') } }) }, // 封面图 async drawPoster ({ ctx, canvas }) { /** * coverWidth: 300 * coverHeight: 400 * coverUrl: http://your-domain/image-path.jpg */ const { coverWidth, coverHeight, coverUrl } = this.data // 封面图底色 ctx.fillStyle = "#eee"; ctx.fillRect(0, 0, coverWidth, coverHeight); // 创建一个图片对象 const coverImage = canvas.createImage() coverImage.src = coverUrl // 绑定onload事件 let coverImageObject = await new Promise((resolve, reject) => { coverImage.onload = () => { resolve(coverImage) } coverImage.onerror = (e) => { reject(e) } }) // 画图 ctx.save() // 保存上下文 ctx.beginPath() // 创建一个路径 ctx.rect(0, 0, coverWidth, coverHeight) // 画一个矩形区域 ctx.clip() // 裁剪 ctx.drawImage(coverImageObject, 0, 0, coverWidth, coverHeight) // 画图 ctx.closePath() ctx.restore() // 恢复画布 }, // 画标题 drawTitle ({ ctx }) { const { coverHeight } = this.data // 绘制标题 ctx.fillStyle = '#333333' ctx.font = `${18 * scale}px "PingFangSC-Regular"` ctx.fillText('不敢相信仙境般美景停车如此便宜', 15 * scale, 40 * scale + coverHeight) ctx.fillText('省下钱吃一碗奇特的锅盖面', 15 * scale, 65 * scale + coverHeight) }, // 点击图片 onImageTap () { const { imagePath } = this.data wx.previewImage({ urls: [imagePath], current: imagePath }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { this.initCanvas() } })

GitHub账号

选择需要上架的开放服务

案例类型