当前，有一个小程序项目在手。希望转发时可以自定义消息共享界面。但是，微信小程序只提供URL和标题来设置图片。
/**
*Users click the upper right corner to share
*/
onShareAppMessage: function() {
return {
imageUrl:'',
title:''
};
}
实现
我们需要转发更多显示内容：头像，用户名和喜欢。幸运的是，这种布局不是很复杂，因此我们考虑通过画布生成图像并返回画布而生成的图像URL。
代码如下（实际上，您需要进行一些显示优化，并且需要自己调试）：
首先，在页面中创建一个新的canvas标签
<canvas canvas-id="canvasid" style="width: 375px; height: 500px;" wx:if="{{canvasShow}}"></canvas>
let context = wx.createCanvasContext('canvasid')
Context. DrawImage (back. Path, 0, 60, backwidth, backheight) // draw the background below
//Draw a circular head, refer to the tutorial: https://www.jianshu.com/p/9a6ee2648d6f the second method
context.save();
var d = 2 * 25;
var cx = 0 + 25;
var cy = 0 + 25;
context.arc(cx, cy,25, 0, 2 * Math.PI);
context.clip();
context.drawImage(avatar.path, 0,0, d, d);
context.restore();
//Draw name and likes
context.setFontSize(14)
context.fillText('userName', 70, 32)
Let zanlength = ('100 '+' second likes'). Length
Context. Filltext ('100 '+' times like ', 375 - 14 * zanlength, 32)
//Execute draw to render and return the image URL
context.draw(true, () => {
//This method should be executed in the callback of draw
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 375,
height: 400,
destWidth: 375,
destHeight: 400,
canvasId: 'canvasid',
success(res) {
//Set the data format returned by onshare appmessage
let shareInfo = {
title: 'customTitle',
imageUrl
}
//Hide canvas
that.setData({
canvasShow: false
})
}
})
});
然而！
在画布上绘制的图片要显示在真实机器上存在问题（画布污染）。非同源图片将不会显示在画布中。以后，我们使用wx.getimageinfo获取图像信息，并通过其中的地址显示图像（相当于翻转图像）。
wx.getImageInfo({
src: imgUrl,
success: function(res) {
/**Get the return value res [0]. Path, and then use the value as the path for canvas to draw pictures
context.drawImage(res[0].path,x,x,x)**/
let drawImgUrl = res[0].path
}
});
嗯〜
摘要
以上是本文的全部内容。
南京小程序开发希望本文的内容对您的学习或工作具有一定的参考学习价值。感谢您对我们的支持。
本文地址：
http://www.njanyou.cn/web/2867.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
5G对网站建设和开发的影响
下一篇：
如何创建更多可网站点击标题的提示
