微信小程序分享朋友圈 - Just丶随心

微信小程序分享朋友圈

原理：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-myCanvas\' oo\'></canvas>

<view pp\'></view>

<view 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;

}