js viewer 图片浏览器

原创已于 2024-01-19 18:58:38 修改 · 621 阅读

8 ·

CC 4.0 BY-SA版权

竹子原创，转载请附链接和署名

文章标签：

#javascript #前端 #开发语言

于 2024-01-09 19:01:09 首次发布

在这里插入图片描述

示例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/viewer.min.js"></script>
	<link rel="stylesheet" href="css/viewer.min.css">

	<body>
		<ul id="jq22">
			<li><img data-original="img/1.png" src="img/1.png" alt="1"></li>
			<li><img data-original="img/2.jpg" src="img/2.jpg" alt="2"></li>
			<li><img data-original="img/3.jpg" src="img/3.jpg" alt="3"></li>
			<li><img data-original="img/4.jpg" src="img/4.jpg" alt="4"></li>
			<li><img data-original="img/5.jpg" src="img/5.jpg" alt="5"></li>
			<li><img data-original="img/6.jpg" src="img/6.jpg" alt="6"></li>
		</ul>
	</body>
	<script>
		var viewer = new Viewer(document.getElementById('jq22'), {
			url: 'data-original'
		});
	</script>
</html>

示例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/viewer.min.js"></script>
	<link rel="stylesheet" href="css/viewer.min.css">
	<body>
        <button type="button" id = "button1">look</button>
	</body>
	<script>
        document.getElementById("button1").addEventListener('click', function() {
            var div = document.createElement('div');
            for (var i = 1; i < 7; i++) {  
              var img = document.createElement('img');  
              img.setAttribute("src", 'img/' + i + '.jpg');
              img.setAttribute("data-original", 'img/' + i + '.jpg');
              img.setAttribute("alt", i);
              div.appendChild(img); // 将 img 添加到 div 中  
            }
            var viewer = new Viewer(div, {
                hidden: function() {
                    viewer.destroy();
                }
            });
            viewer.view(2);
            viewer.show();
        });
        
	</script>
</html>

在这里插入图片描述

还有一个加水印的功能，我CNM的爆粗口。哈哈

开始的时候思路是这样的，自己用js写一个加水印的接口，通过 canvas 在图片上画水印，画完之后转成 base64编码格式的图片，写入 viewer正在展示的 img元素src上进行显示，你知道吗，我CCC，什么问题都给我来了，说什么跨域问题，说什么图片污染不能转换，我你个XX，难搞死，
canvas 可以在图片上写那个傻叉的文字，但是转换为图片编码转不了。
在这里插入图片描述
你问我为什么需要转编码，因为viewer浏览器有自己的区域去显示

我可以这样
var canvas = document.getElementsByClassName(‘viewer-canvas’)[0];
var img = canvas.firstElementChild;
img.src = 加水印的编码，写进去展示。就是那个TMD转换难搞。