微信小程序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 ...
随机推荐
- WPF---依赖属性(一)
一.概要 C#中属性是抽象模型的核心部分,而依赖属性是专门针对WPF的. 在WPF库实现中,依赖属性使用普通的C#属性进行了包装,使得我们可以通过和以前一样的方式来使用依赖属性. 依赖属性优点如下: ...
- tensorflow实现Word2vec
# coding: utf-8 ''' Note: Step 3 is missing. That's why I left it. ''' from __future__ import absolu ...
- OVN架构
原文地址 OVN架构 1.简介 OVN,即Open Virtual Network,是一个支持虚拟网络抽象的系统. OVN补充了OVS的现有功能,增加了对虚拟网络抽象的原生(native)支持,比如虚 ...
- jdbc操作mysql(二):封装
案例四:封装共有操作 封装一个数据库的会话的类 import java.sql.*; public class ConnectionUtil { /** * 获取连接对象的方法,返回一个Connect ...
- 阿里云服务器,http免费转https详细教程
1.搜ssl证书,点击立即购买 2.这里我们选择免费证书,点击右边立即购买,去支付 购买完成之后,申请证书状态会显示在审核中,不过很快的,几分钟就申请成功了,以下就是我申请成功的界面,因为我服务器用的 ...
- Qt5完美解决 界面显示中文乱码
最近在学习Qt,可是一直头疼于中文乱码问题,上网搜了一下,很多都是Qt4中使用如下方法: QTextCodec *codec = QTextCodec::codecForName("gbk& ...
- KMP算法中的几个疑问
KMP算法next数组求解实现 首先我们通过应用场景将KMP算法中用到的名词做一个说明: 在一个字符串(string1)中查询是否存在另一个字符串(string2). 在字符串匹配算法中,我们通常将字 ...
- redis存取数据list
登录redis客户端 一.存取数据 1.左右添加数据 2.读取数据lrange 3.左右固定弹出一个元素 4.列表中个数 5.删除元素值为value的元素 count 值要自己给定: 6.获取和设置指 ...
- ysoserial CommonsColletions1分析
JAVA安全审计 ysoserial CommonsColletions1分析 前言: 在ysoserial工具中,并没有使用TransformedMap的来触发ChainedTransformer链 ...
- xxl-job <=2.0.2 反序列化漏洞
xxl-job <=2.0.2 反序列化漏洞 搭建 https://github.com/xuxueli/xxl-job/releases/tag/2.0.2 下载源码,导入idea,mysql ...