微信小程序背景加水印 简单版
小程序页面增加水印
效果
因为所有页面都要加水印,所以肯定是要用自定义组件实现。
思考路程
第一种
最开始考虑的是canvas生成图片,转换成base64做一张背景图,然后才了解到水印不能直接在元素上作为背景作为页面的最底层,很容易被其他东西覆盖,所以水印一定是要要fixed在页面的最顶层。 canvas生成图片,但是要借用其他插件转成base64
第二种
可以采用DOM元素靠样式实现,也不需要依赖插件,感觉这个更加的不错。于是就代码撸起来,然后每个页面都能有水印了,看起来是成功了。但是!!当切换登录人以后发现有的页面水印上的登录人怎么还是上一个登录人的信息呢?原来component的生命周期事件是依赖于所在页面的,如果页面从未销毁过,Component有些事件就不会再次触发了。于是,我产生了第一种思路,如何能让组件监听到所在页面的声明周期,看小程序文档确实有这样的方法,但是依赖的基础库版本比较高,那用户是低版本基础库岂不是不会生效了。emmmm再想想,那登录的时候保证让打开过的所有页面销毁就可以了啊,当前跳转登录页使用的方法是wx.navigateTo(会保留当前页面,然后跳转,所以有些页面不销毁,组件获取用户id的方法就不会触发第二次了),那退出登录的时候调用wx.reLaunch(关闭所有页面,然后跳转页面)方法就ok
实现代码
- 使用canvas画图,使用upng.js插件将图片转化成base64 这里需要引入一些转base64的js,upng.js以及upng.js的依赖pako.min.js
github.com/photopea/UP…
import UPNG from './upng';const CANVAS = 'water_mark_id';Component({data: {text: '请勿外传',imgBase64: '',color:'rgba(0,0,0,0.5)'},attached() {const { text, color } = this.data;const ctx = wx.createCanvasContext(CANVAS, this);ctx.rotate((335 * Math.PI) / 180);ctx.setFontSize(20);ctx.setFillStyle(color);ctx.fillText(text, 0, 100);ctx.draw(false, () => {setTimeout(() => {wx.canvasGetImageData({canvasId: CANVAS,x: 0,y: 0,width: 120,height: 100,success: (res) => {const pngData = UPNG.encode([res.data.buffer], res.width, res.height);const base64 = wx.arrayBufferToBase64(pngData);this.setData({ imgBase64: 'data:img/jpg;base64,' + base64 });},fail: (err) => {console.log(err);}}, this);}, 2000); });}
});
只需要修改里面的颜色clolor 和 text 文本就可以。页面引用组件
移步资源
微信小程序背景加水印 简单版相关推荐
- 微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...
- 微信小程序接入客服简单版
全网写这个的太少,我只想弄个简单的客服结果一搜索全是让我配什么消息提醒啥的,摸索了好久,终于搞出来了. 1.首先登录小程序官网,然后点击客服,添加客服如图: 2.添加完客服之后,用客服微信扫码关注一下 ...
- 微信小程序拍照加水印
根据上次 1.wxml代码: 因为拍照要到指定位置显示,这里的canvas我想隐藏,就用了css:position:fixed;left: 10000rpx.之前尝试过hidden='true'或者d ...
- 前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来 进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
- 微信小程序列表加载动画示例
微信小程序列表加载动画 微信小程序列表加载动画示例 实现思路 什么是动画? 导航栏设置 列表动画加载 完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下.网上找了很久这种效果, ...
- 微信小程序背景图虚化
微信小程序背景图虚化 filter: blur(10rpx);
- 微信小程序怎么取mysql_微信小程序如何加载数据库真实数据?
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
- php阅读器开发,微信小程序阅读器的简单实例开发
这篇文章主要介绍微信小程序阅读器的简单实例开发的相关资料,需要的朋友可以参考下 今天和朋友聊天说到小程序,然后看在看书,然后我们就弄了个小读书的demo,然后现在分享一下. 一.先来上图: 首先先说下 ...
- 微信小程序背景图真机显示不了
微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了 微信小程序如何设置背景图片? | 微信开放社区 微信小程序设置背景图片不显示问题 ...
最新文章
- c++生成光栅条纹程序_【光学学报】激光分束,自由曲面分束器能挑战相位光栅吗?...
- ubuntu12.04.5安装openssh-server所引发的血案
- 看动画学算法之:排序-插入排序
- [置顶] 2013腾讯编程马拉松初赛第4场(3月24)(HDU 4520 HDU4521 HDU4522 HDU4523 HDU4524)...
- 论文浅尝 | 基于RNN与相似矩阵CNN的知识库问答
- JSON和JS对象之间的互转
- 机器视觉--图像形态学
- 修改smb默认端口_centos7 ssh端口更改方法
- 花书+吴恩达深度学习(十六)序列模型之双向循环网络 BRNN 和深度循环网络 Deep RNN
- python网络编程初级
- 数据库errno: 1045的解决办法
- 凸优化第二章凸集 2.5 分离与支撑超平面
- python mysql_Python-操作 MySQL
- 计算机音乐谱大全极乐净土,极乐净土maria曲谱
- Aggressive cows--二分法思想
- python file是什么意思_Python一直提示runfile是什么意思?
- ValueError.DataFrame columns must be unique for orient=“column“
- keil下汇编语言调试分析
- C#打印PDF文档并实时监测打印进度
- 将文件夹添加到Windows 7 Media Center中的影片库
热门文章
- html颜色自定义器,Color Changer插件,谷歌浏览器夜间模式,网站颜色自定义更改工具...
- GIS开发程序员简历怎么写?怎么面试?GIS开发面试题?GIS专业怎么找工作?
- 爱空间辛益华:装修增项在供给侧和需求侧存在认知偏差
- 如何准备一场双11大促
- 【splishsplash】Houdini粒子的导入与导出
- linux无线usb网卡,Ubuntu / Linux 安装USB无线网卡( tp-link TL-WN725N rtl8188eu )(转)
- java 护眼_护眼模式的彻底设置
- 抖音上的视频用什么软件做的?
- 漫谈中国数字电视标准的诞生(下)
- 简述计算机点火系统基本原理,点火系统的组成与工作原理