一、导读

小程序海报分享功能还是很常用，但是查询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');// 固定 864 X 1536 海报长宽// 画布的真实宽度let canvasW = this.width;// 画布的真实高度let canvasH = this.height;// 头像和二维码大小都需要在规定大小的基础上放大像素比的比例后面都会 *this.systemInfo.pixelRatiolet 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();// 画完之后执行clip()方法，否则不会出现圆形效果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,// 画2倍，提高海报的清晰度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地址

微信小程序生成清晰海报并保存到本地相关推荐

uniapp微信小程序生成分享海报(模板自取)
uniapp微信小程序生成分享海报模板 1.模板自取 2.可自行按需求更改调整 3.效果图如下: 生成前 -----> 生成后的图需知:博主的实现效果是先把需要生成的图片排版成静态页面,再点 ...
微信小程序生成(painter)海报
这是我目前接触到的比较好用的海报插件了官方还有wxml-to-canvas 不会用有很多标签样式上不去界面化生成,可以直接布局 GitHub 地址这个案例可以直接下载然后打开就是一个小程序, ...
微信小程序生成分享海报组件
效果图官方文档地址你看着!!! 代码文档上都有这里面有个坑这里面的像素单位是像素点是iOS的像素比 wxml  <view class=& ...
微信小程序生成分享海报完美解决
可以相信我说的话,但不要当真. 官方文档地址代码文档上都有这里面有个坑这里面的像素单位是像素点是iOS的像素比  <view class= ...
微信小程序项目图片如何保存到本地的方法
先来看小程序中的保存图片到相册的api wx.saveImageToPhotosAlbum({filePath : "./test.png", //这个只是测试路径,没有效果suc ...
uni-app微信小程序合成海报并保存到相册
页面有三部分的图片.logo.二维码和背景图.其中背景图是本地的. logo和二维码是接口给的. 像这样的海报合成的例子我写过一篇,是在vue的项目中的vue把几张图片logo.二维码.背景合成一个海 ...
微信小程序生成海报 poster
原生小程序 canvas 小程序-canvas绘图并保存到系统相册小程序导出朋友圈海报详细记录逻辑清晰的说明了,原生小程序 canvas 绘制的步骤: 获取 Canvas.context 绘制背景 ...
【精】微信小程序生成二维码海报分享 [原理+源码]
关于海报分享的教程数不胜数, 但是我没能找到一个好用的, 为了实现这个功能结合了三篇教程耗时三天才把海报搞定; 首先网络上教程都是直接上教程代码, 然后代码加思路, 对小白我来说就是一头雾水, 只能边 ...
微信小程序生成二维码带参海报
微信小程序生成二维码带参海报没错,就是用 canvas 来实现文章目录微信小程序生成二维码带参海报获取屏幕分辨率比生成二维码获取网络图片并转为本地临时文件绘制背景图片以及二维码代码片段 ...

微信小程序生成清晰海报并保存到本地

一、导读

二、实现代码过程（贴了关键代码，需要可以直接下载源码）

index.wpy 代码如下

util.js 代码如下

Canvas.wpy 代码如下

三、源码地址

微信小程序生成清晰海报并保存到本地相关推荐

最新文章

热门文章