微信小程序自带的设置透明度只有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设置字体透明度。的更多相关文章

  1. 微信小程序 canvas 字体自动换行(支持换行符)

    微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News 微信IDE演示代码https://developers.w ...

  2. 技术博客--微信小程序canvas实现图片编辑

    技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...

  3. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  4. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  5. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  6. 微信小程序canvas生成并保存图片

    ---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图 ...

  7. 微信小程序开发环境安装以及相关设置配置

    微信小程序开发环境安装以及相关设置配置 一.安装 软件名称:wechat_devtools_1.02.1907232_x64 软件安装地址:https://developers.weixin.qq.c ...

  8. 【微信小程序canvas】实现小程序手写板用户签名(附代码)

    工作中公司业务需要的微信小程序用户签字功能 先看效果图: wxml: <view class="wrapper"> <view class="handB ...

  9. 微信 小程序 canvas

    测试手机为IPHONE6,开发者工具版本0.10.102800.开发者工具0.11.112301版本也一样 微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的ca ...

随机推荐

  1. 深入浅出Mybatis系列(十)---延迟加载

    一.延迟加载 resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 延迟加载:先 ...

  2. win10 安装mysql5.7 【自定义安装路径】

  3. linux》centos6.1.环境下发送邮件设置

    转自https://blog.csdn.net/bodybo/article/details/80817968 一. Sendmail安装 在CentOS下,sendmail一般默认是随操作系统一起安 ...

  4. EternalBlue永恒之蓝渗透测试

    Eternal Blue(永恒之蓝)-ms17-010渗透测试 第一次做的渗透测试,也是第一次去写博客,还望各位师傅多多指正 :) 工具 1.靶机系统 window7 开放445以及139端口 2.k ...

  5. JS012. 变量存储含class、id等其他属性的标签元素(动态渲染DOM结点)

    项目中有一处源码需要用变量存储html标签,包含类名和其他一些属性,再动态地将其渲染到页面上. 看下普通的存储方式: initHtml: function () { var me = this; // ...

  6. 导出excel、word、csv文件方法汇总

    http://www.woaic.com/2012/06/64 excel文件主要是输出html代码.以xls的文本格式保存文件. 生成excel格式的代码: /// <summary> ...

  7. UVA 1599 Ideal Path(双向bfs+字典序+非简单图的最短路+队列判重)

    https://vjudge.net/problem/UVA-1599 给一个n个点m条边(2<=n<=100000,1<=m<=200000)的无向图,每条边上都涂有一种颜色 ...

  8. PTA 面向对象程序设计 6-2 逆序字符串

    6-2 逆序字符串 设计一个void类型的函数reverse_string,其功能是将一个给定的字符串逆序.例如,给定字符串为"hello",逆序后为"olleh&quo ...

  9. c++ 打包函数教程

    c++当要重复运行一些代码时可以打包一个函数 当没有返回值时用void打包函数: #include <iostream> #include <stdio.h> using na ...

  10. 第一节:《线程安全和锁Synchronized概念》

    第一节:线程安全和锁Synchronized概念 一.进程与线程的概念 (1)在传统的操作系统中,程序并不能独立运行,作为资源分配和独立运行的基本单位都是进程. 在未配置 OS 的系统中,程序的执行方 ...