<!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. 使用NDK编译 libyuv <转>

    官方源码:http://code.google.com/p/libyuv/简介: libyuv is an open source project that includes YUV scaling ...

  2. Linux split命令实例

    曾经是否想要把一个大文件分割成多个小文件?比如一个5gb日志文件,我们需要把它分成多个小文件,这样我们才有可能使用普通的文本编辑器读取它.有时我们需要传输20gb的大文件到另一台服务器,这就需要我们把 ...

  3. Hadoop YARN: 1/1 local-dirs are bad: /var/lib/hadoop-yarn/cache/yarn/nm-local-dir; 1/1 log-dirs are bad: /var/log/hadoop-yarn/containers hdfs硬盘90% yarn unhealthy

    1/1 local-dirs are bad: /var/lib/hadoop-yarn/cache/yarn/nm-local-dir; 1/1 log-dirs are bad: /var/log ...

  4. [cf557d]Vitaly and Cycle(黑白染色求奇环)

    题目大意:给出一个 n 点 m 边的图,问最少加多少边使其能够存在奇环,加最少边的情况数有多少种. 解题关键:黑白染色求奇环,利用数量分析求解. 奇环:含有奇数个点的环. 二分图不存在奇环.反之亦成立 ...

  5. HDU 4921 Map（状态压缩）

    题意看这篇博客. 思路参考的这篇博客. 补充:面对这种问题有一个常见的套路.比如计算若干个区间对答案的贡献这种问题,直接暴力可能复杂度到O(n ^ 2), 而我们可以计算出每个元素在多少个合法区间中, ...

  6. MyBatis配置Setting详细说明

    该表格转载自http://blog.csdn.net/summer_yuxia/article/details/53169227 setting是指定MyBatis的一些全局配置属性,这是MyBati ...

  7. 关于Java继承体系中this的表示关系

    Java的继承体系中,因为有重写的概念,所以说this在子父类之间的调用到底是谁的方法,或者成员属性,的问题是一个值得思考的问题; 先说结论:如果在测试类中调用的是子父类同名的成员属性,这个this. ...

  8. Pig Latin程序设计1

    Pig是一个大规模数据分析平台.Pig的基础结构层包括一个产生MapReduce程序的编译器.在编译器中,大规模并行执行依据存在.Pig的语言包括一个叫Pig Latin的文本语言,此语言有如下特性: ...

  9. 数据结构 station

    问题描述 一天,小 L 突然对列车的进出站问题产生了兴趣,如下图所示:列车只能从 A 进站,或从 B 出站.列车从 A 进站,进站顺序为 1, 2, 3, 4, 5列车从 B 出站,出站顺序为 5, ...

  10. Charles常见问题汇总

    Charles是一款很好用的抓包修改工具,但是如果你不是很熟悉这个工具的话,肯定会遇到各种感觉很莫名其妙的状况,这里就来帮你一一解答下面再说说charles的一些其他常用的功能. 选择请求后,右键可以 ...