原生js实现的图片拖拽、缩放和旋转小工具

ImageTools.js

该工具是用于一个layui框架的项目，所以如果需要用到别的地方可以自行修改ImageTools.init方法。

效果演示

使用


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="components/layui/css/layui.css">
	</head>
	<body>
		<img id="layui-img" src="images/test.png" width="200px" height="200px" />
	</body>
	<script src="components/layui/layui.js"></script>
	<script src="components/ImageTools.js"></script>
	<script type="text/javascript">
		window.onload = function() {
			var tools = ImageTools.init("#layui-img");
			tools.setOptions({
				angleValue: 45
			})
		}
	</script>

</html>

显示图片的原始比例

  • 因为项目里img标签是固定宽高的，所以导致有些图片比例与原图不符。我们在layui弹出框弹出时根据屏幕尺寸尽量还原图片的原始尺寸。

        var box = {};

	var source = {
		src: ele.src,
		height: ele.naturalHeight,
		width: ele.naturalWidth
	}
	var windows = {
		height: document.documentElement.clientHeight || document.body.clientHeight,
		width: document.documentElement.clientWidth || document.body.clientWidth
	}

	while (source.height >= windows.height || source.width >= windows.width) {
		source.height *= this.params.zoomRatio;
		source.width *= this.params.zoomRatio;
	}

	box.height = source.height;
	box.width = source.width; 

	...


        layer.open({
		type: 1,
		shade: 0.8,
		area: [box.width + 'px', (box.height + 50) + 'px'],
		shadeClose: true,
		scrollbar: false,
		title: "",
		content: box.html,
		success: function() {
                ... 
		}
	});

缩放


ImageTools.prototype.scale = function(type, value) {
	var that = this;
        
        // type:0;点击按钮进行缩放，type:1;用于鼠标滚轮操作
	if (type === 0) {
		that.params.zoomVal += value;
		if (that.params.zoomVal < that.params.minZoomVal) that.params.zoomVal = that.params.minZoomVal
		that.ele.style.transform = "scale(" + that.params.zoomVal + ") rotate(" + that.params.angle + "deg)";

	} else if (type === 1) {
		that.params.zoomVal += event.wheelDelta / 1200;
		if (that.params.zoomVal < that.params.minZoomVal) that.params.zoomVal = that.params.minZoomVal
		that.ele.style.transform = "scale(" + that.params.zoomVal + ") rotate(" + that.params.angle + "deg)";
	}

}

旋转


ImageTools.prototype.rotate = function(edg) {
	this.params.angle += edg;
	this.ele.style.transform = "scale(" + this.params.zoomVal + ") rotate(" + this.params.angle + "deg)";
}

拖拽


ImageTools.prototype.drag = function(callback) {
	var that = this;
	if (that.ele.style.left !== "auto") {
		that.params.left = that.ele.style.left || 0
	}
	if (that.ele.style.top !== "auto") {
		that.params.top = that.ele.style.top || 0
	}
        
        // 获取鼠标按下时的坐标
	that.ele.onmousedown = function(event) {
		that.params.flag = true;
		if (!event) {
			event = window.event;
			that.ele.onselectstart = function() {
				return false;
			}
		}
		var e = event;
		that.params.currentX = e.clientX;
		that.params.currentY = e.clientY;
	}
        
	document.onmouseup = function() {
		that.params.flag = false;
		if (that.ele.style.left !== "auto") {
			that.params.left = that.ele.style.left;
		}
		if (that.ele.style.top !== "auto") {
			that.params.top = that.ele.style.top;
		}
	};

        // 获取鼠标按下后移动时，根据当前的鼠标位置修改图片的位置
	document.onmousemove = function(event) {
		var e = event ? event : window.event;
		if (that.params.flag) {
			var nowX = e.clientX;
			var nowY = e.clientY;
			var disX = nowX - that.params.currentX;
			var disY = nowY - that.params.currentY;
			that.ele.style.left = parseInt(that.params.left) + disX +"px";
			that.ele.style.top = parseInt(that.params.top) + disY +"px";
			if (typeof callback == "function") {
				callback((parseInt(that.params.left) || 0) + disX, (parseInt(that.params.top) || 0) + disY);
			}
			if (event.preventDefault) {
				event.preventDefault();
			}
			return false;
		}
	}
}
posted @ 2021-06-07 15:14  可爱的黑精灵  阅读(1282)  评论(0)    收藏  举报