微信公众号生成海报(uniapp)
前言
这几天接到一个需求,要在公众号内生成分享海报。之前有做过H5和小程序的,心想直接复制过来就行了。没想到踩了不少的坑,搞了好几天终于搞好了,特此分享一下,希望能对大家有所帮助。
效果图
代码实现
<u-mask :show="showPoster" @click="showPoster = false" :custom-style="{background: 'rgba(0, 0, 0, 0.8)'}">
<view class="poster-canvas">
<canvas canvas-id="canvasId"
:style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
</view>
<view class="poster-img-box">
<image class="poster-img" :src="posterUrl" show-menu-by-longpress></image>
</view>
<view class="poster-footer">
长按图片保存
</view>
</u-mask>
import {
getSharePoster
} from '@/components/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster.js';
data() {
return {
showPoster: false,
posterUrl: "",
posterCodeUrl: "",
avatarUrl: "",
bgUrl: "",
poster: {},
}
},
async createPoster() {
let _this = this;
const d = await getSharePoster({ //return Promise
_this: _this, //若在组件中使用 必传
posterCanvasId: 'canvasId', //canvasId
canvasType: '2d',
type: 'testShareType',
backgroundImage: `data:image/png;base64,${this.info.background_url2}`, //背景图片路径, 画布会跟随图片的实际像素, 并绘制为背景, 请不要使背景图片的像素太大
setCanvasWH({
bgObj
}) {
bgObj.width = 245
bgObj.height = 435
_this.poster = bgObj
},
drawArray({ //绘制序列
bgObj, //背景图对象
type, //自定义标识
bgScale, //背景缩放
setBgObj, //动态设置画布(宽高),若使用该方法不建议背景图方式绘制, 建议使用background自定义画布绘制, 因为这个方法绘制修改背景图的宽高
getBgObj //获取动态设置的画布宽高
}) {
//return new Promise((rs, rj)=>{ rs([Obejct, ...]) })
//或者
//return [Obejct, ...]
const elementArray = [{
type: 'image',
id: 'code',
url: `data:image/png;base64,${_this.posterCodeUrl}`,
dx: 170,
dy: 350,
dWidth: 60,
dHeight: 60,
serialNum: 0,
}]
if (_this.info.background_if_avatar) {
elementArray.push({
type: 'image',
id: 'avatar',
url: `data:image/png;base64,${_this.info.image2}`,
dx: 20,
dy: 355,
dWidth: 32,
dHeight: 32,
serialNum: 0,
circleSet: {
r: 16
}
}, )
}
if (_this.info.background_if_nickname) {
elementArray.push({
type: 'text',
id: 'nickname',
text: _this.nickName,
color: '#fff',
dx: 20,
dy: 400,
serialNum: 1,
})
}
return elementArray
},
})
uni.hideLoading()
this.showPoster = true
this.posterUrl = d.poster.tempFilePath
},
以上是具体实现的主要代码,这里选用了QS-SharePoster插件,开始时我是想用uniapp的原生canvas-API进行开发的,可是总是有各种各样的问题,搞了一天不得已只能放弃。
坑
请注意在公众号内图片一定要用base64格式的!在使用uniapp并且公众号内生成海报是需要使用到图片下载API的,这个API总是会莫名其妙的失败,找不到任何的原因。小程序端以及H5都是完全正常的。尝试了好几天无果后,突然想到是不是可以采用base64格式的图片是不是没有限制呢?毕竟base64相当于直接就是数据了,试了一下果然可以,问题也解决了。
微信公众号生成海报(uniapp)的更多相关文章
- C# 实现生成带二维码的专属微信公众号推广海报
原文:C# 实现生成带二维码的专属微信公众号推广海报 很多微信公众号中需要生成推广海报的功能,粉丝获得专属海报后可以分享到朋友圈或发给朋友,为公众号代言邀请好友即可获取奖励的.海报自带渠道二维码,粉丝 ...
- 微信公众号生成带参数的二维码asp源码下载
晚上闲着没事,一个朋友联系,让帮忙写一个微信公众号利用asp生成带参数的二维码,别人扫了后如果已经关注过该公众号的,则直接进入公众号里,如果没关注则提示关注,关注后自动把该微信用户资料获取到并且保存入 ...
- 微信公众号开发C#系列-11、生成带参数二维码应用场景
1.概述 我们在微信公众号开发C#系列-7.消息管理-接收事件推送章节有对扫描带参数二维码事件的处理做了讲解.本篇主要讲解通过微信公众号开发平台提供的接口生成带参数的二维码及应用场景. 微信公众号平台 ...
- 微信公众号开发C#系列-7、消息管理-接收事件推送
1.概述 在微信用户和公众号产生交互的过程中,用户的某些操作会使得微信服务器通过事件推送的形式通知到开发者在开发者中心处设置的服务器地址,从而开发者可以获取到该信息.其中,某些事件推送在发生后,是允许 ...
- uni-app开发经验分享十七: 开发微信公众号(H5)JSSDK 的使用方式
因为这个jssdk被uni-app坑了好多天,作者说支持1.4版本,但是我用1.4的两个分享的新方法一直不支持. 最后只能放弃了,期待什么时候能更新上. 基本的使用方法:第一步 - 下载使用方式下载地 ...
- 微信公众号第三方平台生成自定义菜单提示 获取"access_token失败"
在微信公众号第三方平台要生成自定义菜单时,程序反应很慢,最终提示"获取access_token失败"(之前程序无改动,使用时间已久),查了大半天,找不出原因. 排除.在微信公众号平 ...
- uniapp - 微信公众号授权登录
[缘由] 采用uniapp进行微信小程序和微信公众号双版本开发:考虑到用户唯一性,我们后端确定了以“unionid”.作为唯一标识. 有的小伙伴估计也是刚入这坑,我就简单说一下步骤流程 [摸索] ...
- 微信公众号开发(一)--验证服务器地址的Java实现
现在主流上都用php写微信公众号后台,其实作为后端语言之一的java也可以实现. 这篇文章将对验证服务器地址这一步做出实现. 参考资料:1.慕课网-<初识java微信公众号开发>,2.微信 ...
- NodeJs 开发微信公众号(四)微信网页授权
微信的网页授权指的是在微信公众号中访问第三方网页时获取用户地理.个人等信息的权限.对于开发了自己的网页app应用时,获取个人的信息非常重要.上篇博客讲到了注册时可以获取用户的信息,很多人会问为什么还需 ...
随机推荐
- CEF使用过程问题合集
CEF使用过程问题合集 1.Couldn't mmap icu data file 解决方案:检查程序执行目录下是否有icudtl.dat文件,如果没有请从cef的Resources文件夹中复制一份. ...
- 题解 GT考试
题目传送门 题目大意 给出\(n,m,k\),以及一个长度为\(m\)的数字串\(s_{1,2,...,m}\),求有多少个长度为\(n\)的数字串\(X\)满足\(s\)不出现在其中的个数模\(k\ ...
- Java多线程编程实战指南 设计模式 读书笔记
线程设计模式在按其有助于解决的多线程编程相关的问题可粗略分类如下. 不使用锁的情况下保证线程安全: Immutable Object(不可变对象)模式.Thread Specific Storage( ...
- exe图标消失的解决方案
步骤 win + r组合键打开运行窗口 输入cmd,回车 在终端窗口右键粘贴即可 taskkill /im explorer.exe /f cd /d %userprofile%\appdata\lo ...
- 更好的 java 重试框架 sisyphus 的 3 种使用方式
回顾 我们前面学习了 更好的 java 重试框架 sisyphus 入门简介 更好的 java 重试框架 sisyphus 配置的 2 种方式介绍 更好的 java 重试框架 sisyphus 背后的 ...
- TreeSet和TreeMap中“相等”元素可能并不相等
TreeSet和TreeMap元素之间比较大小是借助Comparator对象的compare方法. 但有些时候,即便compare()返回0也不意味着这两个元素直观上相同. 比如元素是二元组[a,b] ...
- .net Xml加密解密操作
生成密钥的方法: /// <summary>生成RSA加密 解密的 密钥 /// 生成的key就是 方法EncryptByRSA与DecryptByRSA用的key了 /// </s ...
- Scrum Meeting 0609
零.说明 日期:2021-6-9 任务:简要汇报两日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 两日内已完成的任务 后两日计划完成的任务 困难 qsy PM&前端 完成前端功能 ...
- [敏捷软工团队博客]The Agiles 团队介绍&团队采访
项目 内容 课程:北航-2020-春-敏捷软工 博客园班级博客 作业要求 团队作业-团队介绍和采访 团队名称来源 The Agile is The Agile. 敏捷就是敏捷.我们只是敏捷的践行者罢了 ...
- 在Delphi中高效执行JS代码
因为一些原因,需要进行encodeURIComponent和decodeURIComponent编码,在Delphi中找了一个,首先是发现不能正确编码+号,后面强制处理替换了,勉强可用. 后面发现多次 ...