JS利用Canvas实现文字水印和图片水印合成

目录
  • 介绍
  • 文字水印
  • 图片水印

介绍

给图片添加水印可以帮助网站或作者保护自己的版权，或防止内容被别人利用。给图片添加水印分为添加文字水印和添加图片水印，水印一般都做成半透明的，这样不至于影响原图内容的浏览。Canvas 图片水印合成与 Canvas 实现图片压缩 原理基本相同：

  • CanvasRenderingContext2D.drawImage(image, dx, dy, dWidth, dHeight) 方法可以从页面 DOM 元素作为图像源来根据坐标和大小重新绘制该图像。
  • HTMLCanvasElement.toDataURL() 方法支持导出为 base64 字符串。

文字水印

首先创建一个空的 canvas 元素，并获取其上下文。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

获取页面上需要合成水印的 img 元素，或者根据一个 File 或 Blob 对象，创建一个空的 img 元素，将其 src 设为 File 或 Blob 对象的 URL。

设置 canvas 元素的宽高为 img 元素的宽高，清除画布，绘制图像。

canvas.width = img.width;
canvas.height = img.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

设置字体、对齐方式、旋转角度。

ctx.font = `bold ${img.height / 10}px arial`;
ctx.fillStyle = 'rgba(255, 0, 0, .2)';
ctx.textBaseline = 'bottom';
ctx.transform(1, 0.5, -0.5, 1, 0, -canvas.height / 2);

定义水印文字、水印高度，循环绘制水印。

let txt = '1234567 ';
const txtHeight = img.height / 6;
txt = Array(Math.ceil(canvas.width / ctx.measureText(txt).width) * 2).join(txt);
for (let i = 0; i < Math.ceil(canvas.height / txtHeight) * 2; i++) {
  ctx.fillText(txt, 0, i * txtHeight);
}

在页面渲染合成后的图像，释放创建的 URL 对象。

result.src = canvas.toDataURL(type);
URL.revokeObjectURL(img.src);

效果

图片水印

首先创建一个空的 canvas 元素，并获取其上下文。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

获取页面上需要合成水印的 img 元素，或者根据一个 File 或 Blob 对象，创建一个空的 img 元素，将其 src 设为 File 或 Blob 对象的 URL。

设置 canvas 元素的宽高为 img 元素的宽高，清除画布，绘制图像。

canvas.width = img.width;
canvas.height = img.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

设置旋转角度，创建重复图像的模式，绘制水印。

ctx.transform(1, 0.5, -0.5, 1, 0, -canvas.height / 2);
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = ctx.createPattern(imgCover, 'repeat');
ctx.fill();

在页面渲染合成后的图像，释放创建的 URL 对象。

result.src = canvas.toDataURL(type);
URL.revokeObjectURL(img.src);

效果

到此这篇关于JS利用Canvas实现文字水印和图片水印合成的文章就介绍到这了,更多相关JS Canvas水印内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • HTML5 canvas 9绘制图片实例详解

    HTML5 canvas 9绘制图片实例详解

    绘制图片 Var image=new Image(); image.src=" http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau.thumb.700_0.jpeg"; image.onload=function(){} Context.drawImage(image,x,y); Context.drawImage(image,x,y,w,h); Context.drawIamge(image,sx,s

  • JS+Canvas实现满屏爱心和文字动画的制作

    目录 介绍 步骤 介绍 <canvas> 最早由 Apple 引入 WebKit,用于 Mac OS X 的 Dashboard,随后被各个浏览器实现.如今,所有主流的浏览器都支持它.Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式.它可以用于动画.游戏画面.数据可视化.图片编辑以及实时视频处理等方面.Canvas 适合绘制大数据量图形元素的图表(如热力图.地理坐标系或平行坐标系上的大规模线图或散点图等),也适合实

  • HTML5 Canvas绘制图形从入门到精通

    目录 一.canvas 简介 二.Canvas基本使用 2.1 <canvas> 元素 2.2 渲染上下文(Thre Rending Context) 2.3 检测支持性 2.4 一个简单的例子 三.绘制形状 3.1 栅格 (grid) 和坐标空间 3.2 绘制矩形 四.绘制路径 (path) 4.1 绘制线段 4.2 绘制三角形边框 4.3 填充三角形 4.4 绘制圆弧 4.5 绘制贝塞尔曲线 五.添加样式和颜色 fillStyle strokeStyle Transparency(透明度)

  • JavaScript+html5 canvas实现本地截图教程

    JavaScript+html5 canvas实现本地截图教程

    最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.

  • JavaScript canvas 实现用代码画画

    目录 引言 第一部分:图形绘制 画画第一步:准备好画布和画笔 画画第二步:给画笔调个粗细 画画第三步:给画笔沾点颜料 画画第四步:描点画图 (1)画一个三角形 (2)画一个矩形 (3)画一个圆 (4)进阶:画一个笑脸 画画第五步:署名 第二部分:图片绘制 引言 canvas是HTML的一个绘图标签,与SVG用标签绘图不同,canvas是通过Js代码进行图形绘制,多用于移动端分享海报绘制以及照片裁剪等场景.本文将结合部分canvas API介绍在Vue项目中如何使用canvas进行简单的图形绘制和

  • JS利用Canvas实现文字水印和图片水印合成

    目录 介绍 文字水印 图片水印 介绍 给图片添加水印可以帮助网站或作者保护自己的版权,或防止内容被别人利用.给图片添加水印分为添加文字水印和添加图片水印,水印一般都做成半透明的,这样不至于影响原图内容的浏览.Canvas 图片水印合成与 Canvas 实现图片压缩 原理基本相同: CanvasRenderingContext2D.drawImage(image, dx, dy, dWidth, dHeight) 方法可以从页面 DOM 元素作为图像源来根据坐标和大小重新绘制该图像. HTMLCa

  • Js利用Canvas实现图片压缩功能

    最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.createElement

  • PHP添加文字水印或图片水印的水印类完整源代码与使用示例

    PHP实现的给图片添加水印功能,可添加文字水印或图片水印,使用文字水印时需要提供字体文件,使用图片水印时需要提供水印图片,水印图片不能比要添加水印的图片大,请使用背景透明的水印图片. 该水印类支持自定义水印位置.自定义水印大小和水印的透明度,字体水印可自定义颜色等,功能已相应完善. 完整源代码如下(注解中已给出使用示例): <?php /** * 图片加水印类,支持文字水印.透明度设置.自定义水印位置等. * 使用示例: * $obj = new WaterMask($imgFileName);

  • Java添加Word文本水印和图片水印

    Java添加Word文本水印和图片水印

    水印是一种常用于各种文档的声明.防伪手段,一般可设置文字水印或者加载图片作为水印.以下内容将分享通过Java编程给Word文档添加水印效果的方法,即 文本水印 图片水印 使用工具:Free Spire.Doc for Java (免费版) Jar导入 方法1:通过官网下载控件包.在程序下新建一个directory目录,并命名(本示例中命名为lib):将控件包lib文件夹下的jar(如下图1)复制到程序中新建的目录下. 图1: 复制jar文件后,鼠标右键点击jar文件,选择"Add as Libr

  • Java图片处理 (文字水印、图片水印、缩放、补白)代码实例

    package com.hmw.picMark; import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.Image; import java.awt.geom.AffineTransform; import java.awt.image.AffineTransformOp; import java.awt.im

  • Javascript 网页水印(非图片水印)实现代码

    Javascript 网页水印(非图片水印)实现代码

    1 概述 1.1 定义 在一些B/S结构的应用系统中,有很多页面是需要有水印的.常见的就是公文系统.合同系统等.大家常常关注的是网站图片增加水印,而很少关注页面水印.刚去Google了一圈,关于页面水印的文章的数量为几乎为0. 本文中,流牛木马就与大家一起交流一下有关制作网页水印的心得. 本文讨论以下的情形: 新增水印的方法需要用Javascript完成,并要求能够方便地加入到原有的页面中,不能影响到已有的功能. 1.2 预期目标 就图片水印实现方案来说,我们预期至少包括以下几个目标: 1. 实

  • PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】

    本文实例讲述了PHP的图像处理.分享给大家供大家参考,具体如下: 1.添加文字水印 //1.打开图片资源 $src="./material/sea.jpg"; $info=getimagesize($src);//获取图片信息 $type=image_type_to_extension($info[2],false);//转化图片类型 //var_dump($info); $fun="imagecreatefrom{$type}";//拼接成为imagecreate

  • JS和Canvas实现图片的预览压缩和上传功能

    先来一张效果图,压压惊 第一步:用户选择需要上传的图片 <input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()"> 在选定了图片后 upload 函数将被触发,我们需要在这个函数中,获取到图片的资源,将它压缩并利用canvas绘制出来,若需要上传到服务器,也可以利用ajax

  • PHP 图片水印类代码

    支持文字水印.图片水印 支持水印的位置随机或固定(九宫格) 水印透明度设置(图片水印和文字水印都支持) 文字水印的字体.颜色.大小设置 图片水印的背景透明 复制代码 代码如下: <?php /** * 加水印类,支持文字图片水印的透明度设置.水印图片背景透明. * 日期:2011-09-27 * 作者:www.jb51.net * 使用: * $obj = new WaterMask($imgFileName); //实例化对象 * $obj->$waterType = 1; //类型:0为文

  • 简单的java图片处理类(图片水印 图片缩放)

    复制代码 代码如下: import java.awt.AlphaComposite;import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;import java.awt.Image;import java.awt.Toolkit;import java.awt.color.ColorSpace;import java.awt.geom.AffineTransfo

随机推荐