一、导读
- 小程序海报分享功能还是很常用,但是查询api发现小程序并没有提供分享到朋友圈的功能,只能实现通过canvas画一张海报然后保存到本地,让用户主动去发朋友圈。今天这里介绍自己如果生成的,有源码,拉下来安装一下依赖就可以使用了。注:生成的图片清晰,不会随着不同手机,变形。
- 预览体验海报功能
3.生成海报效果图
二、实现代码过程(贴了关键代码,需要可以直接下载源码)
index.wpy 代码如下
<template>
<view class="body">
<image class='background' src="{{bgUrl}}" mode="aspectFill"/>
<scroll-view scroll-y class="scrollPage">
<image src='../public/images/componentBg.png' mode='widthFix' class='response'></image>
<view style="height: 100%; text-align: center; color: white">
demo
</view>
</scroll-view>
<view class="draw-content">
<view class="drawPicture" @tap="drawImage()">点击生成海报</view>
</view>
</view>
</template>
<script>
import wepy from 'wepy';
import Util from '../utils/util';
import Base from '../mixins/base';
export default class Index extends wepy.page {
mixins = [Base];
config = {
navigationStyle: "custom"
};
data = {
bgUrl: '../public/images/123.jpg'
};
methods = {
async drawImage() {
let backgroundImg = await Util.getImageInfo('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587290090925&di=77d696a5839198ea66543fa6c48e74fa&imgtype=0&src=http%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D3616242789%2C1098670747%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D900%26h%3D1350');
wx.navigateTo({url: '/pages/canvas?path=' + backgroundImg.path});
}
};
}
</script>
util.js 代码如下
async function getImageInfo(src) {
return new Promise(function(resolve) {
wx.getImageInfo({
src: src,
success: function(res) {
resolve(res);
},
fail: function() {
resolve();
}
});
});
}
Canvas.wpy 代码如下
<template>
<image class='background' src="{{bgUrl}}" mode="aspectFill"/>
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">海报</view>
</cu-custom>
<view class="content">
<image mode='widthFix' class="canvas-img" src="{{poster}}" style="width: 80%; height: auto"/>
<button class='baocun' @tap="saveImageToPhotos()">保存相册,分享到朋友圈</button>
<view>
<canvas style="width: {{width}}px; height: {{height}}px;position:fixed;top:9999px"
canvas-id="canvasPoster"/>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import Tip from '../utils/tip';
export default class Canvas extends wepy.page {
config = {
navigationStyle: "custom"
};
data = {
bgUrl: '../public/images/123.jpg',
visible: false,
poster: '',
width: 432,
height: 768,
path: ''
};
onLoad(options) {
let that = this;
this.path = options.path;
let ctx = wx.createCanvasContext('canvasPoster');
let canvasW = this.width;
let canvasH = this.height;
let headerW = 70;
let headerX = (canvasW - headerW) / 2;
let headerY = 30;
let qrcodeY = canvasH - 80;
ctx.drawImage(this.path, 0, 0, canvasW, canvasH);
ctx.setFontSize(16);
ctx.textAlign = 'center';
ctx.setFillStyle('#000000');
ctx.fillText('这是昵称', this.width / 2, 120);
ctx.save();
ctx.setStrokeStyle('rgba(0, 0, 0, .2)');
ctx.arc(headerX + headerW / 2, headerY + headerW / 2, headerW / 2, 0, 2 * Math.PI);
ctx.stroke();
ctx.clip();
wx.getImageInfo({
src: 'http://img0.imgtn.bdimg.com/it/u=226418344,3562831340&fm=26&gp=0.jpg',
success: function (res) {
ctx.drawImage(res.path, headerX, headerY, headerW, headerW);
ctx.restore();
ctx.save();
ctx.drawImage('../public/images/code.jpg', headerX, qrcodeY, headerW, headerW);
ctx.save();
ctx.draw();
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'canvasPoster',
x: 0,
y: 0,
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
success: (data) => {
Tip.loaded();
that.visible = true;
that.poster = data.tempFilePath;
that.$apply();
}
});
}, 200);
},
fail: function () {
Tip.loaded();
console.log('fail');
}
});
}
onShow() {
}
methods = {
saveImageToPhotos() {
let self = this;
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
self.saveImage(self.poster);
},
fail() {
wx.openSetting({
success: function () {
},
fail: function () {
}
});
}
});
} else {
self.saveImage(self.poster);
}
},
fail(res) {
console.log(res);
}
});
}
};
saveImage() {
let that = this;
wx.canvasToTempFilePath({
canvasId: 'canvasPoster',
x: 0,
y: 0,
width: that.width,
height: that.height,
destWidth: that.width * 2,
destHeight: that.height * 2,
success: (data) => {
wx.saveImageToPhotosAlbum({
filePath: data.tempFilePath,
success: (res) => {
wx.navigateBack();
},
fail: (err) => {
that.visible = false;
console.log(err);
}
});
}
});
};
}
</script>
三、源码地址
项目git地址