微信小程序实现的canvas合成图片功能示例

在微信小程序中，利用canvas进行图片合成是一项常见的需求，尤其适用于创建个性化分享图或者动态生成的海报。本示例主要讲解如何在微信小程序中使用canvas合成图片，包括获取图片信息、绘制canvas、生成图片以及上传至服务器的步骤。 我们需要获取图片信息。在微信小程序中，可以使用`wx.getImageInfo`方法来获取图片的详细信息，如分辨率、路径等。例如： ```javascript wx.getImageInfo({ src: '图片路径', success: function(res) { // 使用res.path作为图片源进行后续操作 } }) ``` 接下来，我们需要在canvas上绘制图片。在页面的WXML中添加canvas组件，并设置其尺寸： ```html <view class="canvasBox"> <canvas canvas-id="shareCanvas" style="width:375px;height:300px"></canvas> </view> ``` 然后，在对应的JS文件中，利用`wx.createCanvasContext`创建canvas上下文，调用`drawImage`方法将图片绘制到canvas上： ```javascript const ctx = wx.createCanvasContext('shareCanvas'); ctx.drawImage(res.path, 0, 0, 375, 300); ``` 除了绘制图片，还可以在canvas上添加文字、图形等元素。例如，这里添加了一段文字： ```javascript ctx.setFillStyle('#000000'); ctx.setFontSize(20); ctx.fillText("文本内容", 20, 70); ctx.stroke(); ``` 完成绘制后，调用`draw`方法进行渲染，并在回调中使用`wx.canvasToTempFilePath`将canvas内容导出为图片： ```javascript ctx.draw(false, that.drawPicture()); ``` `wx.canvasToTempFilePath`会返回一个临时文件路径，但这个路径只能在微信小程序内部使用。如果需要在服务器或外部访问，需要通过`wx.uploadFile`将图片上传到开发者服务器： ```javascript wx.canvasToTempFilePath({ ..., success: function(res) { that.draw_uploadFile(res); } }) draw_uploadFile: function(r) { wx.uploadFile({ url: '图片上传接口', filePath: r.tempFilePath, name: 'imgFile', success: function(res) { if (res.statusCode == 200) { let imgsrc = JSON.parse(res.data).data.src; that.setData({ imgPath: imgsrc }); } else { console.log('失败'); } }, }) } ``` 在`draw_uploadFile`方法中，`wx.uploadFile`用于上传文件，`success`回调处理返回的服务器响应，通常会包含一个新的图片URL，这个URL可以在外部访问。将这个URL保存下来，可以用于后续展示或分享。 需要注意的是，如果将这些方法封装成自定义组件，需要考虑上下文管理，因为`wx.createCanvasContext`创建的canvas context是局部的，不能在组件外部直接访问。这时，可以通过事件触发或者props传递来解决这个问题。 微信小程序中的canvas合成图片功能提供了丰富的绘图能力，可以满足各种复杂的图像处理需求。通过合理的代码组织和生命周期管理，可以轻松实现从图片获取、绘制到上传的完整流程。