微信小程序分享朋友圈

原理：canvas生成图片再保存到手机

JS

onShow: function () {

var that = this;

//1. 请求后端API生成小程序码

// that.getQr();

//2. canvas绘制文字和图片

const ctx = wx.createCanvasContext('myCanvas');

var imgPath = '../../image/bn.jpg'

var bgImgPath = '../../image/l11.png';

var xcxm = '../../image/xcxm.jpg';

var baibg = '../../image/baibg.png';

ctx.drawImage(baibg, 0, 0, 600, 1800);

ctx.drawImage(imgPath, 0, 0, 400, 200);

ctx.setFillStyle('white')

//ctx.fillRect(0, 520, 600, 280);

//ctx.drawImage(imgPath, 30, 550, 60, 60);

ctx.drawImage(bgImgPath, 5, 210, 60, 60);

// ctx.drawImage(imgPath, 100, 0, 160, 160);

ctx.setFontSize(14)

ctx.setFillStyle('#6F6F6F')

ctx.fillText('辛辣天赛', 65, 245)

ctx.setFontSize(16)

ctx.setFillStyle('#464646')

ctx.fillText('考考姚蜜', 10, 290)

ctx.setFontSize(16)

ctx.fillText('涩开一塔米', 10, 310)

ctx.setFontSize(14)

ctx.fillText('长按扫码查看详情', 10, 340)

ctx.drawImage(xcxm, 190, 260, 80, 80);

ctx.draw()

},

save:function(){

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: 900,

height: 1200,

destWidth: 900,

destHeight: 1200,

canvasId: 'myCanvas',

quality:1,

success: function (res) {

console.log(res.tempFilePath);

var dz= res.tempFilePath

/* that.setData({

shareImgSrc: res.tempFilePath

})*/

wx.saveImageToPhotosAlbum({

filePath: dz,

success(res) {

wx.showModal({

title: '存图成功',

content: '图片成功保存到相册!',

showCancel: false,

confirmText: '好哒',

confirmColor: '#72B9C3',

success: function (res) {

if (res.confirm) {

console.log('用户点击确定');

}

// that.hideShareImg()

}

})

}

})

},

fail: function (res) {

console.log(res)

}

})

},

WXML

<canvas canvas-id='myCanvas' id='oo'></canvas>

<view id='pp'></view>

<view id='pp1' bindtap='save'>保存图片</view>

CSS

#oo{

width: 300px;

height: 380px;

display: block;

margin: 0 auto;

position: relative;

z-index: 99;

background: white;

margin-top: 60px;

border-radius: 6px;

overflow: hidden;

}

#pp{

width: 100%;

height: 100%;

position: fixed;

background: rgba(0,0,0,0.5);

top: 0;

left: 0;

z-index: 98;

}

#pp1{

width: 100px;

height: 40px;

position: fixed;

background: rgba(0,0,0,0.5);

top: 460px;

left: 50%;

margin-left: -50px;

z-index: 99;

background: skyblue;

color: white;

font-size: 16px;

text-align: center;

line-height: 40px;

border-radius: 8px;

}