如何给gif图添加水印

整体方案

获取gif图对每一帧图片和延迟
通过canvas来对每一帧图片进行绘制
把绘制后的图片结合每帧延迟重新生成gif

第一步：获取gif图的每一帧

我们可以通过libgif(github.com/buzzfeed/li…) 这个库来实现这个功能。

例子：

<img src="./example1_preview.gif" rel:animated_src="./example1.gif"width="360" height="360" rel:auto_play="1" rel:rubbable="1" /><script type="text/javascript">$$('img').each(function (img_tag) {if (/.*\.gif/.test(img_tag.src)) {var rub = new SuperGif({ gif: img_tag } );rub.load(function(){console.log('oh hey, now the gif is loaded');for (var i = 1; i <= rub.get_length(); i++) {// 遍历gif实例的每一帧rub.move_to(i);var canvas = rub.get_canvas();}});}});
</script>
复制代码

第二步：使用canvas重新绘制，添加文字

canvas添加文字例子：

var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
context.font = '28px bold 黑体';
context.fillStyle = 'red';
context.textAlign = 'center';
context.fillText('添加文字'+ i, 80, 50);
复制代码

第三步重新绘制gif

可以使用gif.js这个库(github.com/jnordberg/g…)

例子：

var gif = new GIF({workers: 2,quality: 10
});// add an image element
gif.addFrame(imageElement);// or a canvas element
gif.addFrame(canvasElement, {delay: 200});// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});gif.on('finished', function(blob) {window.open(URL.createObjectURL(blob));
});gif.render();
复制代码

整体例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>gif add text</title>
</head>
<script src="gif.js"></script>
<script src="libgif.js"></script>
<body>
</body><script>var input = document.createElement('input');input.setAttribute('type', 'file');input.addEventListener('change', function (e) {console.time('gifaddtext');preLoadGif(input.files[0]);});document.body.appendChild(input);preLoadGif= function (gifSource) {var gifImg = document.createElement('img');var reader = new FileReader();reader.readAsDataURL(gifSource);reader.onloadend = function (e) {var objUrl = e.target.result;// gif库需要img标签配置下面两个属性var img = new Image();img.src = objUrl;img.onload = function () {var width = this.width;var height = this.height;// 新建gif实例var rub = new SuperGif({ gif: gifImg } );var gif = new GIF({workers: 10, // 启用worker数。quality: 100, // 图像质量width: width,height: height,workerScript:'./gif.worker.js'});rub.load(function () {for (var i = 1; i <= rub.get_length(); i++) {// 遍历gif实例的每一帧rub.move_to(i);var canvas = rub.get_canvas();// 通过源码可以看到lib gif 是可以获取到每一帧的延迟的，为了方便，修改了源码481行，在每一帧都返回图片的数据var delay = canvas.frames[i - 1].delay;var canvas2 = document.createElement('canvas');canvas2.width = width;canvas2.height = height;var context = canvas2.getContext("2d");context.drawImage(canvas, 0, 0, canvas2.width, canvas2.height);context.font = '28px bold 黑体';context.fillStyle = 'red';context.textAlign = 'center';context.fillText('添加文字'+ i, 80, 50);gif.addFrame(context, {copy: true, delay: delay * 10});}gif.on('finished', function(blob) {console.timeEnd('gifaddtext');alert('生成成功！');window.open(URL.createObjectURL(blob));});gif.render();});}gifImg.setAttribute('rel:animated_src', objUrl)gifImg.setAttribute('rel:auto_play', '0')gifImg.style.display = 'none';document.body.appendChild(gifImg);}}
</script>
</html>复制代码

转载于:https://juejin.im/post/5cd2608c51882515c110dcf0

如何给gif图添加水印相关推荐

matlab彩色图添加水印,基于离散小波变换的彩色图像水印算法及其MATLAB实现
随着数字多媒体技术的迅速发展,数字(音频.视频)产品的传播日益简单化(利用Internet),其复制后质量几乎不受影响,这就使得版权纠纷问题急剧上升.基于这个原因,人们开始寻找一种能更好地控制非法使用 ...
iMindMap思维导图下载包如何添加水印教程
我们在看视频的时候,经常会在视频的四个角周围看到水印.这些水印有的是用来美化视频,有的用来防抄袭,有的用来体现视频的出处-合适的水印在作品中,有着它不可或缺的作用. 在iMindMap思维导图软件中我 ...
为网页中的图片添加水印的效果
程序本来源于http://dev.csdn.net/develop/article/22/22096.shtm中lovered所写的程序,我把其中的一些我觉得不太好的加以了改进并且增加一些功能形成了该 ...
php 文件预览水印,PHP图片上传，预览图上传，水印设置
//设置图片的存放目录设置水印的存放地址如果愿意,可以给预览图.上传图片分设不同的存储地址 $img_path = $_SERVER['DOCUMENT_ROOT']."/data/img ...
html中加水印,html中实现添加水印的功能
最近项目需求中需要在html中添加水印效果,试验了一下几种方法 1.使用背景图添加水印 2.使用定位添加水印 3.使用js添加可配置控制水印 CSS: body{background-color: # ...
[JavaScript]使用opencv.js实现基于傅里叶变换的频域水印(隐水印)
PS:查了多方资料,都没有提到用 JavaScript 来实现频域水印的教程,故经过笔者的实践,遂写一篇教程来简单介绍. 通过了解频域水印的相关知识,我理解了频域水印就是先将图片进行傅里叶变换,得到频 ...
java 生成二维码，并跟其他图合成新图图片添加水印
效果 <dependency><groupId>com.google.zxing</groupId><artifactId>core</artif ...
ImageMagick将多张图片拼接成一张图片_批量裁剪图片、拼接长图、添加水印不想打开ps，你可以试试这款软件...
工作中的需求常会遇到,批量处理一些图片,比如添加水印.压缩图片大小.批量裁剪等需求,ps可能没办法完成批量的操作,下面这款软件由一位摄影师开发,功能包括了图片加水印.长图拼接.富文本制图.尺寸调整.图 ...
赛效：怎么用改图宝给图片添加水印?
很多人在使用图片时,都希望能加上自己的品牌的名称,凸显自己的品牌,简单的将品牌罗列在图片上,或让图片看起来比较生硬,而借助一些专用的添加图片水印的工具,将相关品牌添加上以后,会给人一种焕然一新的感觉. ...

如何给gif图添加水印

整体方案

第一步：获取gif图的每一帧

第二步：使用canvas重新绘制，添加文字

第三步重新绘制gif

整体例子

如何给gif图添加水印相关推荐

最新文章

热门文章

如何给gif图添加水印

整体方案

第一步：获取gif图的每一帧

第二步：使用canvas重新绘制，添加文字

第三步 重新绘制gif

整体例子

如何给gif图添加水印相关推荐

最新文章

热门文章

第三步重新绘制gif