微信小程序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 ...
随机推荐
- windows下删除文件夹里的 .svn
windows下: 删除文件夹里的 .svn, cmd 进入相应目录 运行 for /r ./ %a in (./) do @if exist "%a/.svn" rd ...
- protected访问权限
Java中protected方法访问权限的问题 protected 修饰的成员变量或方法,只能在同包或子类可访问; package 1 public class TestPackage { prote ...
- docker安装与配置redis详细过程
注:大鸟飞过,这只是简单搭建,能快速运用而已!! 第一步 pull redis 命令:docker pull redis 第二步 创建redis管理目录,方便后期管理 命令: mkdir /data/ ...
- eval()函数的使用
1.eval() 函数作用:可以接受一个字符串str作为参数,并把这个参数作为脚本代码来 执行. 2.参数情况:(1)如果参数是一个表达式,eval() 函数将执行表达式: (2) 如果参数是Java ...
- java 后台解密小程序前端传过来的信息,解密手机号
package com.llny.controller; import com.google.gson.Gson; import com.google.gson.JsonObject; import ...
- ks.cfg文件相关
原文转自:https://www.cnblogs.com/itzgr/p/10029631.html作者:木二 目录 一 图形化生成ks.cfg文件 二 ks.cfg文件相关项解析 一 图形化生成ks ...
- Django项目从创建到运行
环境: Windows Server 2008 R2 标准版 1.安装python运行环境(省略) 2.安装Django pip install Django==3.1.5 # 不写版本号也可以 3. ...
- Python - 文件模式a+读取不了文件
代码 f = open('test/gbk.txt', 'a+', encoding='utf-8') print(f.readline()) 最终的执行结果是输出空,为什么呢? a+模式打开文件指针 ...
- RabbitMQ-如何保证消息在99.99%的情况下不丢失
1. 简介 MQ虽然帮我们解决了很多问题,但是也带来了很多问题,其中最麻烦的就是,如何保证消息的可靠性传输. 我们在聊如何保证消息的可靠性传输之前,先考虑下哪些情况下会出现消息丢失的情况. 首先,上图 ...
- Asp.net MVC Vue Axios无刷新请求数据和响应数据
Model层Region.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; ...