<!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. eclipse DDMS导出文件失败--android Failed to push the item

    我们在写安卓程序的时候,经常会用Eclipse导出模拟器的文件管理里面的文件,但有时候会报错,导致无法导出文件. 报错信息 Failed to push selection: Local path d ...

  2. oracle系统函数（日期函数）

    oracle系统函数(日期函数) 调用日期函数时,首先要明确两个概念,时间戳和日期是不同的,日期中包括年月日但不包括小时分钟秒,时间戳包括年月日小时分钟秒.在oracle中,一般情况下,函数中包含da ...

  3. js中的各种宽高

    在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...

  4. __get(),__set(),__isset(),__unset()

    __get(),__set(),__isset(),__unset() 在给不可访问属性赋值时,__set()会被调用读取不可访问属性的值时,__get()会被调用 当对不可访问属性调用isset() ...

  5. cocos2d-js 浏览器与JSB内存管理机制的不同

    写这边文章的主要目的是为了理解使用cocos3d-js开发app时,浏览器调试与真机情况不一致的原因 一.浏览器中内存管理机制 HTML5版本运行时,整个游戏只存在JS脚本与一些必要的资源文件,这时候 ...

  6. 杭电acm 1037题

    本题应该是迄今为止最为简单的一道题,只有一组输入,输出也简单.... /****************************************** 杭电acm 1037题 已AC ***** ...

  7. Matlab 摄像机标定+畸变校正

    博客转载自:http://blog.csdn.net/Loser__Wang/article/details/51811347 本文目的在于记录如何使用MATLAB做摄像机标定,并通过opencv进行 ...

  8. 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 ...

  9. 使用Maven搭建SSM框架（Eclipse）

    今天学习一下使用Maven搭建SSM框架,以前都是用别人配置好的框架写代码,今天试试自己配置一下SSM框架. 这里我的参数是Windows7 64位,tomcat9,eclipse-jee-neon- ...

  10. SDUT 2107 图的深度遍历

    图的深度遍历 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 请定一个无向图,顶点编号从0到 ...