微信小程序生成分享海报方法(附带二维码生成)

昨天写了一篇小程序本地生成二维码的功能小程序本地生成二维码,趁热打铁今天给大家分享一下小程序内生成海报的功能以及具体步骤

这次分享海报里面的元素比较少,进行绘制的分别有头像,海报背景以及二维码(二维码的生成请看上面《小程序本地生成二维码》一文),此次没有涉及到文字的绘制,不过原理大致相同,这篇文章就不对文字绘制进行阐述了。
下面我们就开始吧🙂

注:实现基于mpvue框架,如果使用小程序自有框架直接开发需要少许改动

流程

0-1

0-2

在(0-1)页面点击“生成专属海报” > 跳转到(0-2)页面进行海报

资源前期准备

在生成海报之前需要准备,头像,海报背景图以及二维码

为了在海报生成是页面没有闪动或者卡顿,需要先在(0-1)页面把这些数据准备好

需要注意的是,生成海报时需要时临时文件或者是本地文件,如果是网络图片,需要通过wx.getImageInfo() api获取图片的临时路径

这里头像用到的是网络路径,所以需要获取头像的临时临时路径,海报背景在本地直接用本地路径即可

二维码则通过weapp-qrcode生成后返回临时路径进行使用(生成逻辑详见文章开头“小程序本地生成二维码”)

准备完成后将资源信息以参数的形式传给(0-2)页面

let shareInfo = {
 headerImg: 'tempfilepath',
 bgImg: '本地路径的图片',
 qrcode: 'tempfilepath'
}
wx.navigateTo({
 url: '/pages/createPoster/main?shareInfo=' + JSON.stringify(shareInfo)
})

获取资源

在(0-2)中获取参数

我们公司的工程是通过mpvue搭建的,获取方法是

mounted () {
 const options = this.$root.$mp.query
 this.shareInfo= JSON.parse(options.shareInfo)
}
// 如果是通过微信开发工具直接开发则在onLoad函数中获取options
onLoad (options) {
 const shareInfo = JSON.parse(options.shareInfo)
}

画布的样式

由于在获取临时路劲保存图片的时候用一倍的canvas保存的图片会很模糊,我们需要对canvas画布进行多倍处理,一般二倍即可,太大了在Android上可能会出现问题

也可以以像素比为倍率,这样比较好处理,这里用的是像素比,具体如下

wx.getSystemInfo({
 success (res) {
 // 通过像素比计算出画布的实际大小(330x490)是展示的出来的大小
 this.width = 330 * res.pixelRatio
 this.height = 490 * res.pixelRatio
 }
})
// 结构样式
<canvas class="canvas-poster" id="canvasPoster" :style="{width:width+'px;',height: height+'px'}" canvas-id="canvasPoster"></canvas>
<img :src="poster" class="poster-img" @click="previewImg" alt="">
<div type="button" @click="savePoster" class="save-btn">
 <img src="../img/0.3_btn_yellow_bg.png" alt="">
 <div class="btn-text">保存图片</div>
</div>
.canvas-poster{
 background-color: #fafafa;
 zoom: 50%; // 将画布缩小到50%(最好通过像素比进行缩小,像素比是2的话就是50%,如果不全是以像素比为标准,在生成图片的时候可能会出现四周黑边)
 position: absolute;
 left: -10000px; // 将画布隐藏在可视区域外
 background: #206949;
}

生成之前获取画布信息

mounted () {
 var query = wx.createSelectorQuery()
 query.select('#canvasPoster').boundingClientRect((res) => {
 // 返回值包括画布的实际宽高
 this.drawImage(res)
 }).exec()
}

生成逻辑

methods: {
 drawImage (canvasAttrs) {
 let ctx = wx.createCanvasContext('canvasPoster', this)
 let canvasW = canvasAttrs.width // 画布的真实宽度
 let canvasH = canvasAttrs.height //画布的真实高度
 // 头像和二维码大小都需要在规定大小的基础上放大像素比的比例后面都会 *this.systemInfo.pixelRatio
 let headerW = 48 * this.systemInfo.pixelRatio
 let headerX = (canvasW - headerW) / 2
 let headerY = 40 * this.systemInfo.pixelRatio
 let qrcodeW = 73 * this.systemInfo.pixelRatio
 let qrcodeX = 216 * this.systemInfo.pixelRatio
 let qrcodeY = 400 * this.systemInfo.pixelRatio
 // 填充背景
 ctx.drawImage(this.shareInfo.bgImg, 0, 0, canvasW, canvasH)
 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()
 // 将头像画到画布上
 ctx.drawImage(this.shareInfo.headerImg, headerX, headerY, headerW, headerW)
 ctx.restore()
 ctx.save()
 // 绘制二维码
 ctx.drawImage(this.shareInfo.qrcode, qrcodeX, qrcodeY, qrcodeW, qrcodeW)
 ctx.save()
 ctx.draw()
 setTimeout(() => {
 //下面的13以及减26推测是因为在写样式的时候写了固定的zoom: 50%而没有用像素比缩放导致的黑边,所以在生成时进行了适当的缩小生成,这个大家可以自行尝试
 wx.canvasToTempFilePath({
 canvasId: 'canvasPoster',
 x: 13,
 y: 13,
 width: canvasW - 26,
 height: canvasH - 26,
 destWidth: canvasW - 26,
 destHeight: canvasH - 26,
 success: (res) => {
  this.poster = res.tempFilePath
 }
 })
 }, 200)
 },
 previewImg () {
 if (this.poster) {
 //预览图片,预览后可长按保存或者分享给朋友
 wx.previewImage({
 urls: [this.poster]
 })
 }
 },
 savePoster () {
 if (this.poster) {
 wx.saveImageToPhotosAlbum({
 filePath: this.poster,
 success: (result) => {
  wx.showToast({
  title: '海报已保存,快去分享给好友吧。',
  icon: 'none'
  })
 }
 })
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现分享商品海报功能

    我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能.实现该功能只要跟着如下几个步骤就可以快速实现啦!(本文示例代码使用的是uni-app,原生或者其他框架需要将uni前缀该成对应框架前缀即可:) 步骤描述不清晰或者不想看步骤?那就直接访问完整代码地址吧 完整代码演示:微信小程序 - 分享商品海报 相关文档: uni-app官方文档 微信小程序官方文档 第一步:提前将需要分享的图片素材先缓存至本地临时图片路径: initPic(){ this.handleNetImg

  • 微信小程序生成海报分享朋友圈的实现方法

    项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题. 需求 利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户. 生成的海报如下 需求分析 1.利用小程序官方提供的api可以直接分享转发到微信群打开小程序 2.利用小程序生成海报保存图片到相册分享到朋友圈,用户长按识别二维码关注公众号或者打开小程序来达到裂变的目的 实现方案 一.分析如何实现 相信大家应该都会有类似的迷惑,就是如何按照产品设计的那样绘制成海报,其实当时

  • 微信小程序分享海报生成的实现方法

    为了吸引更多的用户,设计好一个分享海报还是很有必要的.而小程序要生成一个海报还是有点坑的,下面分享下我们打卡小程序的一些经验. 分享海报的效果图如下: 制作要求: 海报以弹窗形式展现,各种手机型号都可以正常显示 海报的内容由背景图.日期.随机的名言警句.活动的二维码及用户的参加活动的信息 海报保存的图片大小为 iphone 6 的两倍图(750 * 1334) 由于看到的弹窗图片与保存的图片是两种大小,所以一开始看了些网上的其他教程,建议是搞两个 canvas 一个大的一个小的.实际过程中,采用

  • 微信小程序生成分享海报方法(附带二维码生成)

    昨天写了一篇小程序本地生成二维码的功能小程序本地生成二维码,趁热打铁今天给大家分享一下小程序内生成海报的功能以及具体步骤 这次分享海报里面的元素比较少,进行绘制的分别有头像,海报背景以及二维码(二维码的生成请看上面<小程序本地生成二维码>一文),此次没有涉及到文字的绘制,不过原理大致相同,这篇文章就不对文字绘制进行阐述了. 下面我们就开始吧

  • 微信小程序里长按识别二维码的实现过程

    前言 我们都知道公众号里的二维码可以长按识别,但是小程序限制比较严格,没有办法实现二维码的长按识别,一直以来我都是这样认为的,微信的官方规则里也是这么写的,直到今天上午,我无意间发现一个小程序里的二维码居然可以长按识别,于是就好奇的去研究了一番,结果还真的可以实现小程序里长按识别二维码.不知道是官方的漏洞还是程序的bug,但是既然这个功能可以实现,那当然要愉快的用上一用啦 老规矩,先看效果图 可以看到,我们成功的在小程序里实现了长按识别二维码的功能.下面就教大家如何一步步实现吧.因为官方的规格还

  • iOS第三方框架二维码生成与扫描

    本文实例为大家分享了iOS第三方二维码生成与扫描的具体代码,供大家参考,具体内容如下 导入第三方框架libqrencode(生成二维码)和ZBarSDK(二维码扫描) 导入头文件 #import "QRCodeGenerator.h" #import "ZBarSDK.h" 创建两个按钮点击事件 点击按钮一实现生成二维码 - (IBAction)erWeiMaBtn1:(id)sender { // 设置图片框存放二维码 UIImageView *imgView =

  • 微信小程序二维码生成工具 weapp-qrcode详解

    微信小程序 - 二维码生成工具 下载:weapp-qrcode.js文件 github:https://github.com/Pudon/weapp-qrcode-base64 在项目中引入 weapp-qrcode.js 文件 js const app = getApp(); const QR = require('../../lib/weapp-qrcode.js'); // 引入 weapp-qrcode Page({ /** * 页面的初始数据 */ data: { QrCodeURL:

  • Android中二维码的生成方法(普通二维码、中心Logo 二维码、及扫描解析二维码)

    首先声明我们通篇用的都是Google开源框架Zxing,要实现的功能有三个 ,生成普通二维码.生成带有中心图片Logo 的二维码,扫描解析二维码,直接上效果图吧 首先我们需要一个这样的 Zxing 的包类似于这样 接下来需要引入资源 1.drawable 中引入图片 navbar.png 2.layout中引入camera.xml.main.xml.qrcode_capture_page.xml 3.创建raw文件夹并添加beep.ogg 扫描声音 4.合并color.xml,copy ids.

  • java实现二维码生成的几个方法(推荐)

    java实现二维码生成的几个方法,具体如下: 1: 使用SwetakeQRCode在Java项目中生成二维码 http://swetake.com/qr/ 下载地址 或着http://sourceforge.jp/projects/qrcode/downloads/28391/qrcode.zip 这个是日本人写的,生成的是我们常见的方形的二维码 可以用中文 如:5677777ghjjjjj 2: 使用BarCode4j生成条形码和二维码 BarCode4j网址:http://sourcefor

  • Java实现二维码生成的代码方法

    1.支持QRcode.ZXing 二维码生成.解析: 2.QRCode 方式生成二维码支持添加图片,如下: package common; import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.util.Has

  • Python实现动态二维码生成的示例代码

    目录 第一个库:MyQR 普通的二维码制作 带背景图片的二维码制作 带动图背景的二维码制作 第二个库:qrcode 简单的二维码制作 带背景图片的二维码制作 大家好,我是辰哥~ 今天给大家分享两个制作二维码的Python库,可以生成普通的二维码.图片背景版二维码.动图GIF版二维. 第一个库:MyQR 安装 pip install MyQR 普通的二维码制作 from MyQR import myqr #运行 myqr.run('http://mtw.so/5w0Ubz') 二维码附上了链接,用

  • Android中的二维码生成与扫描功能

    0. 前言 今天这篇文章主要描述二维码的生成与扫描,使用目前流行的Zxing,为什么要讲二维码,因为二维码太普遍了,随便一个Android APP都会有二维码扫描.本篇旨在帮助有需求的同学快速完成二维码生成和扫描的功能. 1.    Zxing的使用 从github上下载项目后,可以看到整体代码结构如下: 我们只需将Zxing包下的所有代码copy一份到我们的项目中去,除了这些还需要zxing的jar包,最后相应的资源文件,包括values文件下的ids文件.raw文件中的资源文件(可以替换).

  • Android 二维码 生成和识别二维码 附源码下载

    今天讲一下目前移动领域很常用的技术--二维码.现在大街小巷.各大网站都有二维码的踪迹,不管是IOS.Android.WP都有相关支持的软件.之前我就想了解二维码是如何工作,最近因为工作需要使用相关技术,所以做了初步了解.今天主要是讲解如何使用ZXing库,生成和识别二维码.这篇文章实用性为主,理论性不会讲解太多,有兴趣可以自己查看源码. 1.ZXing库介绍 这里简单介绍一下ZXing库.ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口

随机推荐