canvas添加水印
<canvas id="canvas"></canvas>
<canvas id="water"></canvas>
<img src="" id="imgShow" alt=""/>
var ca = document.getElementById("canvas");
var ctx = ca.getContext("2d"); var water = document.getElementById("water");
var waterCtx = water.getContext("2d"); var imgShow = document.getElementById("imgShow"); ca.width = 900;
ca.height = 600; water.width = 200;
water.height = 50; var img = new Image(); img.src = "img.jpg"; // 水印canvas的样式
waterCtx.font = "30px Aril bold";
waterCtx.fillStyle = "rgba(0,0,0,.3)";
waterCtx.textBaseline = "midddle";
waterCtx.fillText("芳芳芳芳付", 20, 30); // 图片加载完后,去执行其他操作
img.onload = function(){
ctx.drawImage(img,ca.width - img.width,ca.height - img.height);
ctx.drawImage(water,ca.width - water.width,ca.height - water.height);
var imgOut = ca.toDataURL("image/jpeg");
imgShow.src = imgOut;
}
canvas添加水印的更多相关文章
- 微信小程序Canvas添加水印字体,通过setGlobalAlpha设置字体透明度。
微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了.所以直接使用是不行的. 换种思路实现: ...
- php使用imagick模块实现图片缩放、裁剪、压缩示例
PHP 使用Imagick模块 缩放,裁剪,压缩图片 包括gif图片 缩放 裁剪 复制代码代码如下: /** * 图片裁剪 * 裁剪规则: * 1. 高度为空或为零 按宽度缩放 高度自适 ...
- php图片处理库
<?php namespace app\common\library; /** * include 'imagick.class.php'; $image = new lib_image_ima ...
- 神奇的canvas——巧用 canvas 为图片添加水印
代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...
- 前端小程序——js+canvas 给图片添加水印
市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧 html: <canvas id="shuiyinTest"> < ...
- 使用canvas给图片添加水印
css部分 .clip { position: absolute; clip: rect(0 0 0 0); } html部分 <input type="file" id=& ...
- 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,
一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
- C# 给PDF文件添加水印
水印种类及功能介绍 PDF水印分为两种:文本水印和图片水印.文本水印一般被用在商业领域,提醒读者该文档是受版权保护的,其他人不能抄袭或者免费使用.除了这个特征,水印还可以用来标记这个文档 的一些基 ...
- Android 图片添加水印图片或者文字
给图片添加水印的基本思路都是载入原图,添加文字或者载入水印图片,保存图片这三个部分 添加水印图片: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...
随机推荐
- Ansible 快速上手(转)
add by zhj: 执行Ansible(发音时,重音在最前面)命令有两种方式,一种是ad-hoc形式,另一种是playbooks,对于软件开发者来说,一般使用ad-hoc就足够了.playbook ...
- CSS 优先级&伪元素&伪类
优先级 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素 伪元素 属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式 1 :first-line 向文本的首行 ...
- oracle创建索引表空间
Oracle 的索引可分为5种,它们包括唯一索引.组合索引.反向键索引.位图索引和基于函数的索引.1.创建索引的标准语法CREATE INDEX 索引名 ON 表名 (列名)TABLESPACE 表空 ...
- yaml语言在线可视化翻译
yaml语言在线可视化翻译 https://editor.swagger.io/
- python-面向对象-06_私有属性和私有方法
私有属性和私有方法 01. 应用场景及定义方式 应用场景 在实际开发中,对象 的 某些属性或方法 可能只希望 在对象的内部被使用,而 不希望在外部被访问到 私有属性 就是 对象 不希望公开的 属性 私 ...
- (4.22)Microsoft 管理控制台启用 SSL 加密的 SQL Server 实例
如何通过使用 Microsoft 管理控制台启用 SSL 加密的 SQL Server 实例 关键词:MSSQL加密,sql server加密,sql server客户端与服务器传输内容加密 转自:h ...
- vc让界面保持最上层
vc让界面保持最上层.事实上就一个函数就ok了, ::SetWindowPos(AfxGetMainWnd()->m_hWnd,HWND_TOPMOST,-1,-1,-1,-1,0);
- CentOS安装Docker CE
安装Docker CE(免费版) docker EE企业版您可以根据需要以不同方式安装Docker CE: 大多数用户 设置Docker的存储库并从中进行安装,以便于安装和升级任务.这是推荐的方法. ...
- 配置SQL Server 2016无域AlwaysOn(转)
Windows Server 2016 以及 SQL Server 2016出来已有一段时间了,因为Windows Server 2016可以配置无域的Windows群集,因此也能够以此来配置无域的S ...
- Delphi INI文件保存与读取
//需要引用IniFiles uses system.IniFiles; //保存INI配置文件 procedure TForm1.btnSaveClick(Sender: TObject); var ...