小程序canvas绘制自定义分享图片并分享给好友

小程序的分享有自己的机制，在页面点击右上角，或者页面中的button 采用open-type=share方式也可以触发onShareAppMessage方法。

文档里面明确说明，分享的图片可以采用网络图片，那么我们自定义图片之后将其保存，得到微信的临时文件路径也是符合要求的。
废话不多说，直接贴代码。我将绘制分享图的功能封装了一下，如下：

// 考虑了有些文字是带有换行符的，安卓和iOS对于换行符的处理不一样，所以这里需要单独考虑
// canvas绘制文字自动换行
function fillTextToCanvas(cxt, text, beginWidth, beginHeight) {const lineLength = 24;// 行高let item = '';let count = 0;const stringLength = text.length;const newText = text.split('');const context = cxt;let beginHeightNew = beginHeight;context.textAlign = 'left';for (let i = 0; i <= stringLength; i++) {if (count === 15) { // count一行显示多少个字context.fillText(item, beginWidth, beginHeightNew);beginHeightNew += lineLength;item = '';count = 0;}if (i === stringLength) {context.fillText(item, beginWidth, beginHeightNew);item = '';count = 0;}item += newText[0];count += 1;newText.shift();}
}
//  canvas绘制文字自动换行
function drawLongText(longText, cxt, beginWidth, beginHeight) {const lines = longText.split('\n');const linesLen = lines.length;const lineLength = 24;// 行高if (linesLen >= 0) {for (let t = 0; t < linesLen; t++) {const beginHeightNew = beginHeight + lineLength * t;fillTextToCanvas(cxt, lines[t], beginWidth, beginHeightNew);}}
}// 绘制分享图片
function createSharePicUrl(self, avatar, nickname, college, content, callback) {const shareCtx = wx.createCanvasContext('shareCanvas', self);shareCtx.rect(0, 0, 250, 200);shareCtx.setFillStyle('white');// 画头部个人信息wx.downloadFile({url: avatar,success(res) {const avatarWidth = 40; // 绘制的头像宽度const avatarHeight = 40; // 绘制的头像高度const avatarX = 12; // 绘制的头像在画布上的位置const avatarY = 15; // 绘制的头像在画布上的位置shareCtx.save();shareCtx.beginPath(); // 开始绘制// 先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针shareCtx.arc(avatarWidth / 2 + avatarX,avatarHeight / 2 + avatarY,avatarWidth / 2,0,Math.PI * 2,false);shareCtx.clip();shareCtx.drawImage(res.tempFilePath,avatarX, avatarY,avatarWidth,avatarHeight); // 推进去图片，必须是https图片shareCtx.restore(); // 恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制// 画中间帖子内容shareCtx.setTextAlign('left'); // 文字居中shareCtx.setFillStyle('#333333');shareCtx.setFontSize(15); // 文字字号：15pxshareCtx.fillText(nickname, 64, 31, 100);shareCtx.setFillStyle('#999999');shareCtx.setFontSize(12); // 文字字号：12pxshareCtx.fillText(college, 64, 52, 100);shareCtx.setFillStyle('#070707');shareCtx.setFontSize(15); // 文字字号：15pxdrawLongText(content, shareCtx, avatarX, 75 + 10);shareCtx.draw(false, setTimeout(callback, 200));},});
}
module.exports = {drawLongText,createSharePicUrl,
};

上面我将两个方法也都暴露出来了，可以在每个页面自由的调用。
调用方法：

// 在xx.js里面引入
const createSharePic = require('../../utils/createSharePic');

生成分享图之后，将图片保存，生成分享图，方便分享。

createSharePic.createSharePicUrl(this,item.avatar,item.nickname,item.collegeName,item.body, () => {wx.canvasToTempFilePath({canvasId: 'shareCanvas',x: 0,y: 0,width: 250,height: 200,success(res) {console.log(res.tempFilePath);that.setData({sharePicUrl: res.tempFilePath,});},}, that);});

下面简述了一下我本次开发遇到的问题，有兴趣的可以看下，也许你也出现了同样的问题，这样我们也算同病相怜，哈哈哈~

遇到的问题：

问题1：canvas层级问题
canvas是原生组件，在所有的组件的上面，除非你用cover-view组件，但是那个更坑爹，看到下面bug&tip那么多，我瞬间觉得难用，用了之后发现果然难用，所以我直接放弃了这个组件。

那到底怎么解决这个层级的问题呢？

必要的时候再显示，不必要的时候隐藏
wx:if可以控制一个组件的显示和隐藏，这个方法可以参考下。比如我之前的场景：某个页面有多个弹框，弹框出现的时候，绘制的canvas的图会显示在最上面，弹框盖不住那个图，这个时候，我发现将canvas图隐藏起来，弹框能正常显示，那就隐藏呗。哈哈哈，因为我的弹框很大，canvas图片隐藏之后用户也是感知不大的，弹框消失的时候再显示，完美~哈哈哈
移到窗口看不到的地方
这是我这次采用的方法。position:fixed; right:-100%; css里面添加两个属性，这样canvas就在窗口外面啦，可能此时canvas就会说：小伙砸，看不到我，看不到我，我就在这里，来抓我呀~~哈哈哈

问题2：创建分享图的时机
创建分享图是这次功能实现花时比较多的点，我的场景是这样的：页面里面有一个列表，列表里面的每一项都可以分享，也可以删除，这里的分享需要走原生onShareMessage方法，分享图里面需要多个元素，也就是分享的内容需要自定义。
（1）原来我的想法是：点击买个item的时候我再去绘制图片，等到分享图绘制好了之后我再显示分享卡片，但是我发现每次分享的卡片显示了之后，我的图还没绘制好，捶你的小胸口~~我要哭会。
（2）看来这个思路不行啊，容我开动下脑筋，想个新方法。那就先将每个item对应的分享图绘制好，然后点击item的时候将对应的分享图保存下面给分享卡片，这么一测试，我发现，哎，好像可以啦。但是当我测试了删除和新增功能之后，我就又蛋疼了，因为新增的没有生成新的对应的canvas，删除之后呢，canvas也没有相应的删除，导致分享卡片跟内容不对应的问题，我勒个去的，捶你的小胸口，我再哭会~。
（3）上面两个方法都不行，我觉得我需要苦思冥想一下，于是我出去上个了厕所…嗯，想出来了，那就保证永远都是一个canvas，每次在这个画布上面重新绘制分享图。为了防止又出现之前分享图来不及绘制的问题，这次实现思路是这样的：点击每个item的时候我就开始绘制，并将生成的图片保存起来，然后再让分享按钮显示，分享按钮是下面这样的：

点击分享的时候，去拿刚刚生成的分享图的临时链接，你会发现成啦。生成的分享卡片内容是一致的，而且新增，删除之后也不会错乱，啊哈哈哈，让小姐姐我长舒一口气。

（4）有的图片不显示
这次我需要显示的头像，或者你需要一些其他的图片，这些图片你需要先下载下来，不然就会不显示。
顺便赘述下：因为小程序的分享卡片图片是5：4比例，所以这里我直接写死了在方法里面，各位如果有其他的需要可以自行更改，每个元素的位置也是可以自己调哒，么么哒，分享给你们，希望对大家有用。

小程序canvas绘制自定义分享图片并分享给好友相关推荐

小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...
微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为我们只能设置文本的最大宽度,这就产生 ...
微信 html 字体自动换行,详解微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvascontext.filltext参数为我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
小程序Canvas绘制图片太大，自动闪退，安卓会有crash问题
2019独角兽企业重金招聘Python工程师标准>>> 问题说明: 目前小程序Canvas版本还有不少bug,性能较低. 对于图片太大使用ctx.drawImage(imgpath, ...
小程序canvas绘制微信头像
微信小程序canvas是不支持绘制网络图片的,所以逻辑就是先下载到本地,使用本地临时路径去绘制: // 查看是否授权wx.getSetting({success(res) {if (res.authS ...
小程序 canvas 绘制图片
canvas绘制图片绘制图片的问题 html 绘制图片的问题 1.canvas不能绘制网络图片需要转换成本地图片进行使用 2.多张图片绘制需要调用 img.onload,进行嵌套绘制 html &l ...
微信小程序使用html2canvas,微信小程序canvas 2d 引入本地图片并生成分享图
在小程序基础库 v2.9.0 正式开放一套全新的 Canvas 接口.该接口符合 HTML Canvas 2D 的标准,实现上采用 GPU 硬件加速,渲染性能相比于现有的 Canvas 接口有一倍左右 ...
微信小程序canvas绘制图片的注意事项---不能是网络图片
上周五做了个需求,用canvas画图并保存到本地,没在手机上测试,今天看的时候突然发现: drawImage(imageResource, dx, dy, dWidth, dHeight) 其中ima ...
微信小程序canvas绘制图片真机不显示问题
用canvas绘制图片的时候,模拟器上正常显示,真机上不显示 const ctx = wx.createCanvasContext('canvasImg'); var imgUrl = 'https: ...

小程序canvas绘制自定义分享图片并分享给好友

遇到的问题：

小程序canvas绘制自定义分享图片并分享给好友相关推荐

最新文章

热门文章