记录下自己编写简单的JS 图片预览插件

最新推荐文章于 2024-06-20 10:53:59 发布

Vince352

最新推荐文章于 2024-06-20 10:53:59 发布

阅读量549

点赞数

分类专栏： JavaScript 文章标签：图片预览插件

本文链接：https://blog.csdn.net/Vincent_Field/article/details/83041485

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用

<body>
<script src="http://www.mufengcandi.com/js/jquery-1.11.0.js" type="text/javascript"></script>
<script src="./VieViewer.js" type="text/javascript"></script>
<link rel="stylesheet" href="./VieViewer.css">
</head>

<body>
		<div id="myviewer"></div>
</body>

<script>

	var src = '../image/test.png';
	var shower = new VieViewer(src, '#myviewer', 600, 500);
	shower.load();
	
</script>

API

rotate方法：旋转（顺时针为正）
shower.rotate(90)

horizontalFlip方法：横向翻转
shower.horizontalFlip()

verticalFlip方法：纵向翻转
shower.verticalFlip()

zoomIn方法：放大
shower.zoomIn()

zoomOut方法：缩小
shower.zoomOut()

downloadRawImage方法：下载（原始）图片，参数name为给定文件名
shower.downloadRawImage()

downloadImage方法：下载（当前）图片，参数name为给定文件名
shower.downloadImage()

showNextImage方法：图片更换（并马上显示出来），参数可以为url或者image类
shower.showNextImage('http://www.xxx.com/xxxx/xx.png');
或
var image = new Image();
image.setAttribute('crossOrigin', 'anonymous'); // 跨域情况
image.src = 'http://www.xxx.com/xxxx/xx.png';
shower.showNextImage(image);

源码：

https://download.csdn.net/download/vincent_field/10718830