<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<canvas id="myCanvas" width="1000" height="500" >

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

    //准备img对象

    var img = new Image();

    img.src = './img/demo.jpg';

    // 加载完成开始绘制

    img.onload=function(){

       //准备canvas环境

       var canvas=document.getElementById("myCanvas");

       var ctx=canvas.getContext("2d");

       // 绘制图片

       ctx.drawImage(img,0,0);

       // 绘制水印

       ctx.font="20px microsoft yahei";

       ctx.fillStyle = "rgba(255,255,255,0.5)";

       ctx.fillText("my images",100,100);

    }

</script>

</body>

其实就是

canvas给图片加水印的更多相关文章

  1. 使用 ImageEnView 给图片加水印,及建缩略图

    摘要: 使用 ImageEnView 给图片加水印,及建缩略图 {Power by hzqghost@21cn.com}unit CutWater; interface uses  Math,imag ...

  2. 火车头dede采集接口，图片加水印，远程图片本地化，远程无后缀的无图片本地化

    <?php /* [LocoySpider] (C)2005-2010 Lewell Inc. 火车采集器 DedeCMS 5.7 UTF8 文章发布接口 Update content: 图片加 ...

  3. thinkphp 3.2.3整合ueditor 1.4，给上传的图片加水印

    今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载 ...

  4. PHPThumb处理图片，生成缩略图，图片尺寸调整，图片截取，图片加水印，图片旋转

    [强烈推荐]下载地址(github.com/masterexploder/PHPThumb). 注意这个类库有一个重名的叫phpThumb,只是大小写的差别,所以查找文档的时候千万注意. 在网站建设过 ...

  5. php 分享两种给图片加水印的方法

    本文章向码农们介绍 php 给图片加水印的两种方法,感兴趣的码农可以参考一下本文章的源代码. 方法一:PHP最简单的加水印方法 <?php // http://www.manongjc.com ...

  6. Java图片处理（二）图片加水印

    图片加水印,是通过图片重叠绘制实现的.实现代码如下: public static void press(String pressImg, String pressText, String target ...

  7. PHP给图片加水印

    <?php /** *图片加水印 *@param $srcImg 原图 *@param $waterImg 水印图片 *@param $savepath 保存路径 *@param $savena ...

  8. 如何用node.js批量给图片加水印

    上一篇我们讲了如何用node.js给图片加水印,但是只是给某一张图片加,并没有涉及到批量处理.这一篇,我们学习如果批量进行图片加水印处理. 一.准备工作: 首先,你要阅读完这篇文章:http://ww ...

  9. php对图片加水印--将图片先缩小，再在上面加水印

    方法: /**  * 图片加水印(适用于png/jpg/gif格式)  *  * @author flynetcn  *  * @param $srcImg  原图片  * @param $water ...

随机推荐

  1. 消息队列：JMS之基本概念介绍

    摘要:The Java Message Service (JMS) API is a messaging standard that allows application components bas ...

  2. cocos2dx 3.x 修改NDK_ROOT、ANDROID_SDK_ROOT、ANT_ROOT路径

    CMD到setup.py目录 Python setup.py -h 查看帮助: Options:  -h,--help            showthis help message and exi ...

  3. 【转】Hibernate 配置

    转自:http://www.blogjava.net/19851985lili/articles/108128.html 由于Hibernate是为了能在各种不同环境下工作而设计的, 因此存在着大量的 ...

  4. modsign: could't get uefi db list

    手头上一个工控机,装完 ubuntu  16.04后重启, 一直提示如下错误: modsign: could't get uefi db list 用过ubuntu的修复工具也没有成功. 后经过如下操 ...

  5. 搭建基于IDEA+Selenium+Java+TestNG+Maven+Jenkins+SVN的Web端UI自动化测试环境

    第一步:工具下载安装配置 JDK安装与配置 IDEA安装与配置 Maven安装与配置 Tomcat部署与配置 Jenkins部署与配置 Svn安装与配置 各浏览器驱动下载与配置 第二步:集成各个工具到 ...

  6. Windows上的程序员神器Cmder

    用过Windows版本Git的都知道Git自带了Git Bash,这个在很大程度上满足了我的需求,随着Git的版本升级越来越好用 安装Cmder Cmder官网,它把conemu,msysgit和cl ...

  7. hadoop常用命令详细解释

    hadoop命令分为2级,在linux命令行中输入hadoop,会提示输入规则 Usage: hadoop [--config confdir] COMMAND where COMMAND is on ...

  8. 来，了解一下Java内存模型(JMM)

    网上有很多关于Java内存模型的文章,在<深入理解Java虚拟机>和<Java并发编程的艺术>等书中也都有关于这个知识点的介绍.但是,很多人读完之后还是搞不清楚,甚至有的人说自 ...

  9. Confluence 6 当前使用的数据库状态

    进入  > 基本配置(General Configuration) > 问题检查和支持工具(Troubleshooting and support tools) 你就可以看到当前使用的数据 ...

  10. 图片文字css小知识点

    行内元素,图片和文字中间有缝隙,需要给父元素设置font-size:0: 图片和文字不对齐,给图片设置vertical-align:top 文字行高有缝隙 设置vertical-align:top