微信小程序Canvas添加水印字体,通过setGlobalAlpha设置字体透明度。
微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了。所以直接使用是不行的。
换种思路实现:就是把需要加水印的图片弄成拷贝成两张(大小尺寸一样),然后一张图片加水印字体并通过CanvasContext.setGlobalAlpha设置字体透明度,然后把两张图片合并就能实现照片不透明,字体透明。
微信扫一下小程序码可以查看实现的效果:

主要js代码逻辑:
1 var ctx= wx.createCanvasContext(‘canvanid’);
2 var tempFilePaths =that.data.res.tempFilePaths;
3 //获取图片基本信息
4 wx.getImageInfo({
5 src:tempFilePaths[0],
6 success: function (res) {
7 var width = res.width;
8 var height = res.height;
11 ctx.drawImage(res.path,0,0,width,height);
12 ctx.beginPath();
13 ctx.setFontSize('15');
14 ctx.setFillStyle('red');
15 ctx.setGlobalAlpha('0.6');
16 ctx.fillText('加水印字体', 100,100);
17 wx.getImageInfo({
18 src:tempFilePaths[0],
19 success: function (res1) {
20 ctx.drawImage(res1.path,0,0,width,height);
21 ctx.draw();
22 }})
23
24 }
25 })
微信小程序Canvas添加水印字体,通过setGlobalAlpha设置字体透明度。的更多相关文章
- 微信小程序 canvas 字体自动换行(支持换行符)
微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈 https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...
- 技术博客--微信小程序canvas实现图片编辑
技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- 微信小程序--canvas画布实现图片的编辑
技术:微信小程序 概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...
- 微信小程序canvas生成并保存图片
---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图 实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...
- 微信小程序开发环境安装以及相关设置配置
微信小程序开发环境安装以及相关设置配置 一.安装 软件名称:wechat_devtools_1.02.1907232_x64 软件安装地址:https://developers.weixin.qq.c ...
- 【微信小程序canvas】实现小程序手写板用户签名(附代码)
工作中公司业务需要的微信小程序用户签字功能 先看效果图: wxml: <view class="wrapper"> <view class="handB ...
- 微信 小程序 canvas
测试手机为IPHONE6,开发者工具版本0.10.102800.开发者工具0.11.112301版本也一样 微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的ca ...
随机推荐
- Web安全-信息收集
信息收集 前言:在渗透测试过程中,信息收集是非常重要的一个环节,此环节的信息将影响到后续成功几率,掌握信息的多少将决定发现漏洞的机会的大小,换言之决定着是否能完成目标的测试任务.也就是说:渗透测试的思 ...
- 常见面试题:java8有什么新特性?
常见面试题:java8有什么新特性? 主要有以下这些新特性: lambda 表达式,经常配合函数式接口使用,可以有效减少代码量 Runnable 是一个函数式接口,下面展示了创建线程三种写法,显然最后 ...
- springboot全局异常封装案例
@ControllerAdvice三个场景:>https://www.cnblogs.com/lenve/p/10748453.html 全局异常处理 全局数据绑定 全局数据预处理 首先定义一个 ...
- Heartbeat+HAProxy+MySQL半复制高可用架构
目录 一 基础环境 二 架构设计 三 安装MySQL 3.1 安装MySQL 3.2 初始化MySQL 四 配置MySQL半同步 4.1 加载插件 4.2 配置半同步复制 4.3 master创建账号 ...
- SpringBoot整合定时任务----Scheduled注解实现(一个注解全解决)
一.使用场景 定时任务在开发中还是比较常见的,比如:定时发送邮件,定时发送信息,定时更新资源,定时更新数据等等... 二.准备工作 在Spring Boot程序中不需要引入其他Maven依赖 (因为s ...
- string类型数据的操作指令
1. 2. 3. 4. 5. 6. 7. 8. 9. 从右到左是索引从-1开始 10. 11. 12. 13. 14. 15.
- 安全测试工具(1)- Burp Suite Pro的安装教程
啥是Burp Suite 用于攻击web 应用程序的集成平台 程序员必备技能,不仅可以拿来做渗透测试.漏洞挖掘还能帮助程序员调试程序 Bug 它包含了许多Burp工具,这些不同的burp工具通过协同工 ...
- python3 爬虫五大模块之一:爬虫调度器
Python的爬虫框架主要可以分为以下五个部分: 爬虫调度器:用于各个模块之间的通信,可以理解为爬虫的入口与核心(main函数),爬虫的执行策略在此模块进行定义: URL管理器:负责URL的管理,包括 ...
- Linux的基础指令(二)
目录: 一.列表显示目录内容-ls 二.设置别名-alias 三.统计目录及文件空间占用情况-du 四.创建新目录 -mkdir 五.创建空文件-to ...
- CommonsBeanutils1 分析笔记
1.PropertyUtils.getProperty commons-beanutils-1.9.2.jar 包下的 PropertyUtils#getProperty方法相对于getXxx方法,取 ...