这次给大家带来小程序保存图片分享到朋友圈功能实现，小程序保存图片分享到朋友圈功能实现的注意事项有哪些，下面就是实战案例，一起来看一下。
说明
首先说明一点，小程序内是不能直接分享到朋友圈的。所以只能通过生成图片，携带小程序二维码，保存到手机相册，让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。参考市面上支持分享的应用，基本都是这种实现方式。
准备阶段
1.通过服务器获取小程序码
这里可以参考下微信的官方文档，给后台指定的参数和路径等信息，让后台生成指定的小程序码。然后调用wx.getimageinfo将后台生成的小程序码保存起来。
注意一定要仔细看下微信的文档，如果生成小程序码的路径正式服务器不存在，将会生成失败。这点也很蛋疼，很不方便调试。
wx.getimageinfo({
src:'https://xxx.jpg',//服务器返回的带参数的小程序码地址
success: function (res) {
//res.path是网络图片的本地地址
qrcodepath = res.path;
},
fail: function (res) {
//失败回调
}
});
1.通过canvas绘制所需信息
准备好所有的图片之后就可以通过canvas绘制了，然后再将canvas导出为图片。关于绘制这块，可以参考微信的canvas api，下面的基本都是查着api的方法走的。
其中需要注意的有几点。
1.是不知道绘出来的文字长度，所以不知道文字到底什么时候该换行，所以针对商品标题，可能多行的数据固定了一行18个字符。
2.是关于绘制图片的导出，按照官方api的说法应该在draw()完成的回调中执行，但是通过
canvasctx.draw(false,function(res){
});
这种方式，一直不回调完成。不知道哪里出问题了。所以最后只好加了一个延时去保存图片。
/**
* 绘制分享的图片
* @param goodspicpath 商品图片的本地链接
* @param qrcodepath 二维码的本地链接
*/
drawsharepic: function (goodspicpath, qrcodepath) {
wx.showloading({
title: '正在生成图片...',
mask: true,
});
//y方向的偏移量，因为是从上往下绘制的，所以y一直向下偏移，不断增大。
let yoffset = 20;
const goodstitle = this.data.orderdetail.paltproduct.name1;
let goodstitlearray = [];
//为了防止标题过长，分割字符串,每行18个
for (let i = 0; i < goodstitle.length / 18; i++) {
if (i > 2) {
break;
}
goodstitlearray.push(goodstitle.substr(i * 18, 18));
}
const price = this.data.orderdetail.price;
const marketprice = this.data.orderdetail.marketprice;
const title1 = '您的好友邀请您一起分享精品好货';
const title2 = '立即打开看看吧';
const codetext = '长按识别小程序码';
const imgwidth = 780;
const imgheight = 1600;
const canvasctx = wx.createcanvascontext('sharecanvas');
//绘制背景
canvasctx.setfillstyle('white');
canvasctx.fillrect(0, 0, 390, 800);
//绘制分享的标题文字
canvasctx.setfontsize(24);
canvasctx.setfillstyle('#333333');
canvasctx.settextalign('center');
canvasctx.filltext(title1, 195, 40);
//绘制分享的第二行标题文字
canvasctx.filltext(title2, 195, 70);
//绘制商品图片
canvasctx.drawimage(goodpicpath, 0, 90, 390, 390);
//绘制商品标题
yoffset = 490;
goodstitlearray.foreach(function (value) {
canvasctx.setfontsize(20);
canvasctx.setfillstyle('#333333');
canvasctx.settextalign('left');
canvasctx.filltext(value, 20, yoffset);
yoffset += 25;
});
//绘制价格
yoffset += 8;
canvasctx.setfontsize(20);
canvasctx.setfillstyle('#f9555c');
canvasctx.settextalign('left');
canvasctx.filltext('￥', 20, yoffset);
canvasctx.setfontsize(30);
canvasctx.setfillstyle('#f9555c');
canvasctx.settextalign('left');
canvasctx.filltext(price, 40, yoffset);
//绘制原价
const xoffset = (price.length / 2 + 1) * 24 + 50;
canvasctx.setfontsize(20);
canvasctx.setfillstyle('#999999');
canvasctx.settextalign('left');
canvasctx.filltext('原价:¥' + marketprice, xoffset, yoffset);
//绘制原价的删除线
canvasctx.setlinewidth(1);
canvasctx.moveto(xoffset, yoffset - 6);
canvasctx.lineto(xoffset + (3 + marketprice.tostring().length / 2) * 20, yoffset - 6);
canvasctx.setstrokestyle('#999999');
canvasctx.stroke();
//绘制最底部文字
canvasctx.setfontsize(18);
canvasctx.setfillstyle('#333333');
canvasctx.settextalign('center');
canvasctx.filltext(codetext, 195, 780);
//绘制二维码
canvasctx.drawimage(qrcodepath, 95, 550, 200, 200);
canvasctx.draw();
//绘制之后加一个延时去生成图片，如果直接生成可能没有绘制完成，导出图片会有问题。
settimeout(function () {
wx.canvastotempfilepath({
x: 0,
y: 0,
width: 390,
height: 800,
destwidth: 390,
destheight: 800,
canvasid: 'sharecanvas',
success: function (res) {
that.setdata({
shareimage: res.tempfilepath,
showsharepic: true
})
wx.hideloading();
},
fail: function (res) {
console.log(res)
wx.hideloading();
}
})
}, 2000);
},
最后看下绘制出来的效果图。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
使用前端方法实现图片转字符画
js数组方法使用步骤详解
以上就是小程序保存图片分享到朋友圈功能实现的详细内容。