uniapp用canvas实现分享海报

做app时通常会遇到分享海报的需求，将当前页面的海报保存到本地相册，然后就可以分享。重点是将当前页面的某一块作为海报页面保存到本地。

这是是通过canvas画图来解决的，参考官网将canvas转换为图片的方法

https://uniapp.dcloud.io/api/canvas/canvasToTempFilePath?id=canvastotempfilepath

首先将需要的海报用canvas画出来，这里就比较繁琐，定位定点要准确，如果UI设计图精准的话就要方便一些。

1.因为canvas绘图是需要一些时间的，所以添加了loading至绘图完成，以防用户点进去界面空白；

2.适配机型是通过getSystemInfo方法来取得屏幕宽度来除以设计稿的宽度得出的比例，只需要在每个数字乘以这个比例即可实现自适应；

3.用canvasToTempFilePath方法将绘制的canvas图转换为图片，这个方法在以上也解释过了，并且贴出官网链接，可自行了解；

4.这里使用的定时器延迟一些时间再调用方法转换图片，主要是防止canvas未绘制完成就转换为空白图片；

5.注意：h5端转换后生成的图片是base64格式，app端是一个临时路径(如果要回显在界面中，最好是用 image 标签，img标签有时显示不出来)

        capture() {uni.showLoading({title: '加载中...'})let _this = this;let Width, Height;// 获取屏幕宽高uni.getSystemInfo({success(res) {Width = res.screenWidth;Height = res.screenHeight;},fail(err) {console.log(err)}});let wid = Width / 375;let marginLeft = wid * 32;let conMarginLeft = wid * 20;const ctx = uni.createCanvasContext('myCanvas', _this);ctx.drawImage('https://bwy.obs.myhuaweicloud.com/bwyapp/img/tk_yqhy_icon_hb.png', 0, 0, wid * 320, wid *414);// 内容ctx.setFontSize(wid * 14)ctx.setFillStyle('#fff');ctx.fillText('累计', wid * 40, wid * 115, wid * 80)ctx.setFontSize(wid * 17)ctx.setFillStyle('#FED917');ctx.fillText('1553', wid * 70, wid * 117, wid * 120)ctx.setFontSize(wid * 14)ctx.setFillStyle('#fff');ctx.fillText('人 ,', wid * 115, wid * 115, wid * 80)ctx.fillText('共获得', wid * 145, wid * 115, wid * 200)ctx.setFontSize(wid * 17)ctx.setFillStyle('#FED917');ctx.fillText('132185', wid * 190, wid * 117, wid * 200)ctx.setFillStyle('#fff');ctx.fillText('U', wid * 252, wid * 117, wid * 250)// 邀请码ctx.setFontSize(wid * 32)ctx.setFillStyle('#2AD3B1');ctx.fillText(this.inviteCode, wid * 165, wid * 370, wid * 300)ctx.draw(false, (() => {setTimeout(() => {uni.canvasToTempFilePath({canvasId: 'myCanvas',destWidth: 400,destHeight: 600,quality: 1,fileType: 'png',success: (res) => {_this.base64Img = res.tempFilePath;console.log(_this.base64Img)},fail(err) {console.log(err)},complete(val) {uni.hideLoading();},}, _this);}, 2000)})())},

绘图完成之后需要将图片下载下来，这里提供了app端和h5端的下载图片方式，拿到图片链接即可。

           downloadImg() {// #ifdef APP-PLUSuni.saveImageToPhotosAlbum({filePath: this.base64Img,success: function() {uni.showToast({title: '下载成功！',icon: 'none'})},fail(err) {uni.showToast({title: '下载失败，请稍后再试！',icon: 'none'})console.log(err)},});// #endif// #ifdef H5var oA = document.createElement('a');oA.download = 'share';oA.href = this.base64Img;document.body.appendChild(oA);oA.click();oA.remove(); // 下载之后把创建的元素删除// #endif},

补充：在界面中要在canvas标签加上canvas-id，否则canvas显示不出来

<canvas canvas-id="myCanvas" />

踩坑：

如果canvas要绘制在弹框中，父级元素一定要设置宽高，否则显示不出来！！！！！

uniapp用canvas实现分享海报相关推荐

uniapp 微信小程序分享海报
uniapp 微信小程序分享海报下面是一个Uniapp微信小程序分享海报的简单示例: 在Uniapp项目中创建一个新的页面,用于展示要分享的内容和生成海报.例如,我们可以在新页面中显示一张图片和一些 ...
uniapp微信小程序生成分享海报(模板自取)
uniapp微信小程序生成分享海报模板 1.模板自取 2.可自行按需求更改调整 3.效果图如下: 生成前 -----> 生成后的图需知:博主的实现效果是先把需要生成的图片排版成静态页面,再点 ...
微信小程序使用canvas生成分享海报功能复盘
前言近期需要开发一个微信小程序生成海报分享的功能.在h5一般都会直接采用 html2canvas 或者 dom2image 之类的库直接处理.但是由于小程序不具备传统意义的dom元素,所以也没有办法 ...
微信小程序使用canvas绘制分享海报
一.准备工作最近在做的一个vue项目中,需要做一个分享海报,头秃!!! 首先确定海报那些地方是随机变动的.海报背景.引用二维码生成组件(目前市场上有很多生成二维码的组件,这个项目用的是uqrcode ...
小程序Canvas生成分享海报避坑指南
关于小程序使用Canvas画布生成分享海报,网上有很多的教程,但是结合到自己的业务上面就BUG百出了接下来分享一下我的经历微信出了新的api 微信公众平台目前更新不是太即使,查问题好多帖子都是一两 ...
微信小程序canvas商品分享海报
先上效果图 1.wxml <button class="footer-item" bindtap="creatShareImageTap">分享&l ...
uni-app 利用canvas画简单海报并保存图片
一.效果图二.代码 <template><view class="canvas-box"><canvas class="canvas&q ...
微信小程序2D canvas绘制分享海报
效果图: wxml <view><canvas type="2d" id="canvas_box" style="width:260 ...
在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...

uniapp用canvas实现分享海报

uniapp用canvas实现分享海报相关推荐

最新文章

热门文章