如何給gif圖添加水印

時間 2019-12-12

標籤如何 gif 添加水印欄目 HTML 简体版

原文原文鏈接

總體方案

獲取gif圖對每一幀圖片和延遲
經過canvas來對每一幀圖片進行繪製
把繪製後的圖片結合每幀延遲從新生成gif

第一步：獲取gif圖的每一幀

咱們能夠經過libgif(github.com/buzzfeed/li…) 這個庫來實現這個功能。javascript

例子：html

<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添加文字例子：java

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…)git

例子：github

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>

複製代碼