<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>图片水印添加</title>

</head>

<body style="background: black;">

    <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">您的浏览器尚不支持canvas</canvas>

    <canvas id="watermark-canvas" style="display:none;margin:0 auto;border:1px solid #aaa;">您的浏览器尚不支持canvas</canvas>

    <script>

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

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

        var watermarkCanvas = document.getElementById("watermark-canvas");

        var watermarkContext = watermarkCanvas.getContext("2d");

        window.onload = function(){

            canvas.width = 600;

            canvas.height = 750;

            var image = new Image();

            image.src = "wx.jpg"; //这里填写图片路径

            image.onload = function(){

             context.drawImage(image,0,0,canvas.width,canvas.height);

             context.drawImage(watermarkCanvas,canvas.width - watermarkCanvas.width,canvas.height - watermarkCanvas.height);

            }

            //setup watermark canvas

            watermarkCanvas.width = 600;

            watermarkCanvas.height = 100;

            watermarkContext.font = "bold 30px Arial";

            watermarkContext.lineWidth = "1";

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

            watermarkContext.textBaseline = "middle";

            watermarkContext.fillText( "水印文字" , 20 , 50 );

        }

    </script>

</body>

</html>

浏览中，图片另存为即可。

利用canvas添加图片水印--直接上代码的更多相关文章

  1. Swift - 给图片添加图片水印（图片上绘制另一张图，并可设透明度）

    我前面写了篇文章讲解如何给图片添加文字水印,而如果想要添加图片类型的水印也很简单,只要把原来代码里添加文字的部分改成图片即可. 1,效果图如下: (在图片左上角添加了一个半透明的logo图片) 2,为 ...

  2. 利用iTextSharp组件给PDF文档添加图片水印，文字水印

    最近在做关于PDF文档添加水印的功能,折腾了好久,终于好了.以下做个记录: 首先会用到iTextSharp组件,大家可以去官网下载,同时我也会在本文中附加进来. 代码中添加引用为:   using S ...

  3. javacpp-opencv图像处理之2：实时视频添加图片水印，实现不同大小图片叠加，图像透明度控制，文字和图片双水印

    欢迎大家积极开心的加入讨论群 群号:371249677 (点击这里进群) javaCV图像处理系列: javaCV图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体.位置. ...

  4. python-批量添加图片水印

    前言: 最近总是被无良公众号和培训机构拷贝文章,他们根本不会给你备注原文出处,这种行为真的让人不高兴,所以计划以后的文章都添加上自己的水印. 话不多说,直接上代码. 一.单张图片添加文字水印 # -* ...

  5. 利用canvas制作图片（可缩放和平移）+相框+文字

    前言: 公司一个售前问我能不能用H5做一个手机拍照,给相片添加相框和添加文字上传到服务器的功能,我当时一琢磨觉得可行,就利用空余时间做了一个demo,去掉了拍照和上传,如果以后有机会,会给补上,当然对 ...

  6. 利用canvas压缩图片

    现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...

  7. PHP给图片添加图片水印

    涉及到的函数: 1.file_get_contents():用于将文件的内容读入到一个字符串中的首选方法.如果操作系统支持,还会使用内存映射技术来增强性能. 2.list():list() 函数用于在 ...

  8. php使用GD库实现图片水印和缩略图——给图片添加图片水印

    今天呢,就来学习一下在php中使用PD库来实现对图片水印的文字水印方法,不需要PS哦! 首先,准备素材 (1)准备一张图片 (2)准备一张水印(最好是透明的,即背景是白色底) (3)准备一中字体(在电 ...

  9. 利用canvas 导出图片

    1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...

随机推荐

  1. 【270】IDL处理GeoTIFF数据

    参考:将原GeoTIFF数据的投影坐标信息赋值到新创建的文件上 pro tiff_projection ;启动ENVI e = ENVI(/HEADLESS) ;打开文件 file = 'D:\01- ...

  2. findall查找 ^$*+?{ }{m,n}[].[.] \w \s \d \b \D \W

    #!/usr/bin/env python import re r = "aasa da.5a5dfgfda ada" ret = re.findall('a',r) print( ...

  3. 【总结整理】json数据请求简化版理解（祺哥的成果）

    在同源js目录下新建.txt文件 { "news":[ {"title":"审计管理","time":"201 ...

  4. gym - 101673I Twenty Four, Again (表达式树枚举)

    题意及思路 模拟场上用一般方法枚举非常麻烦,一个小时没写出来,还是自己太菜了...用表达式树枚举有一个好处,判断需不需要加括号非常方便,只有当前节点运算符的优先级高于子节点的时候,才需要给子节点加一个 ...

  5. MarkdownPad 2 安装和破解

    MarkdownPad 2 安装和破解 下载:http://markdownpad.com/ 下载下面这个: 破解:http://w3cboy.com/post/2014/10/MarkdownPad ...

  6. Entity Framework Tutorial Basics（33）：Spatial Data type support in Entity Framework 5.0

    Spatial Data type support in Entity Framework 5.0 MS SQL Server 2008 introduced two spatial data typ ...

  7. Proxool Provider unable to load JAXP configurator file: proxoolconf.xml

    Proxool Provider unable to load JAXP configurator file: proxoolconf.xml log4j:WARN No appenders coul ...

  8. rpm bug

    rpm无法安装 今天安装java时候,下载的rpm的包,但是用linux打开时候发现不能正常打开. 错误详情 主要是rpm安装时候的错误,java提示的错误就没有记录了. Reading packag ...

  9. RGB转灰度的几种算法

    这里我用的摄像头是OV2640,这款摄像头的像素是200万.通过对摄像头拍摄图像的进行图像的转化,先把图像的格式转化为RGB565,然后在进行灰度的转化,最后进行二值化处理,设定阈值,进行二值化的处理 ...

  10. 动态合并GridView数据行DataRow的列

    前段时间,Insus.NET一直在演示GridView控件Header头行或列:<动态变更GridView控件列名>和<动态合并或定制GridView控件Header头某些列> ...