<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添加水印的更多相关文章

  1. 微信小程序Canvas添加水印字体,通过setGlobalAlpha设置字体透明度。

    微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了.所以直接使用是不行的. 换种思路实现: ...

  2. php使用imagick模块实现图片缩放、裁剪、压缩示例

    PHP 使用Imagick模块 缩放,裁剪,压缩图片 包括gif图片 缩放 裁剪 复制代码代码如下: /**  * 图片裁剪  * 裁剪规则:  *   1. 高度为空或为零   按宽度缩放 高度自适 ...

  3. php图片处理库

    <?php namespace app\common\library; /** * include 'imagick.class.php'; $image = new lib_image_ima ...

  4. 神奇的canvas——巧用 canvas 为图片添加水印

    代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...

  5. 前端小程序——js+canvas 给图片添加水印

    市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧 html: <canvas id="shuiyinTest"> < ...

  6. 使用canvas给图片添加水印

    css部分 .clip { position: absolute; clip: rect(0 0 0 0); } html部分 <input type="file" id=& ...

  7. 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  8. C# 给PDF文件添加水印

      水印种类及功能介绍 PDF水印分为两种:文本水印和图片水印.文本水印一般被用在商业领域,提醒读者该文档是受版权保护的,其他人不能抄袭或者免费使用.除了这个特征,水印还可以用来标记这个文档 的一些基 ...

  9. Android 图片添加水印图片或者文字

    给图片添加水印的基本思路都是载入原图,添加文字或者载入水印图片,保存图片这三个部分 添加水印图片: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

随机推荐

  1. root用户远程登录Ubuntu

    安装了一台Ubuntu的服务器,由于大家都需要使用,因此创建了多个用户,多台windows机器用过Putty远程登录,但是默认情况下创建的用户都是普通用户,也就是说很多root用户能够使用的权限以及命 ...

  2. wordpress去掉<link rel='dns-prefetch' href='//s.w.org' />

    我们在用wordpress建站时经常会看到<link rel='dns-prefetch' href='//s.w.org' />,应该是为了从s.w.org预获取表情和头像,目的是提高网 ...

  3. $ sudo python -m pip install pylint 出错解决方法

    问题:在unbuntu执行$ sudo python -m pip install pylint出错解决方法支行以下命令sudo pip install pylint==1.9.3这样roboware ...

  4. 启动Jmeter4.0 后弹出警告: WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0 x80000002. Windows RegCreateKeyEx(...) returned error code 5.

    启动Jmeter4.0 后弹出命令窗口提示信息: WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at r ...

  5. oracle安装---yum.sh

    !#/bin/bash yum install binutils* -yyum install compat* -yyum install elfutils* -yyum install gcc* - ...

  6. 搭建简单SBT工程实践

    在本机jdk(主要配置环境变量).scala(主要配置环境变量).sbt(主要配置①私服repositories  ②sbtconfig.txt)都已经安装且配置好的情况下. repositories ...

  7. xtrabackup全库还原+binlog日志还原

    1.场景 mysql数据库误删某个库.误删表或者误删除数据 如下模拟图:备份策略定为每天凌晨进行全库备份,在B时间点进行了误操作以后,有两种恢复场景,一种是恢复到B时间点误操作前,一种是恢复到C时间点 ...

  8. Java通过POI生成Excel

    import java.io.FileOutputStream; import java.text.SimpleDateFormat; import java.util.ArrayList; impo ...

  9. 截取字符串后几位用 length

  10. 19-Python3 函数

    def area(width,heigh): return width*heigh def print_wecome(name): print('welcome',name) print('Runoo ...