這次帶給大家小程式保存圖片分享到朋友圈功能實現，小程式保存圖片分享到朋友圈功能實現的注意事項有哪些，下面就是實戰案例，一起來看一下。
說明
先說明一點，小程式內是不能直接分享到朋友圈的。所以只能透過產生圖片，攜帶小程式二維碼，儲存到手機相冊，讓使用者自己選擇發到朋友圈。然後可以透過在小程式中識別二維碼來進入小程式的指定頁面。參考市面上支援分享的應用，基本上都是這種實現方式。
準備階段
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);
},登入後複製
最後看下繪製出來的效果圖。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
使用前端方法實作圖片轉字元畫
#JS陣列方法使用步驟詳解
以上是小程式儲存圖片分享到朋友圈功能實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
