一：html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
<script src="js/dragObject.js"></script>
<script src="js/inputPic.js"></script>
<style>
#imgMouse {
position: absolute;
cursor: move;
width: 100%;
}
</style>
</head>
<body>
<div style="width: 100%;height: 100%;">
<input id="browse" type="button" value="浏览" class="btn btn-primary" οnclick="$('#picInput').click();" />
<input type="file" id="picInput" accept="image/*" οnchange="inputPic(this)" style="display:none;" />
<img id="imgMouse" src="" alt="">
</div>
<script>
$(function(){
var oImg = document.getElementById('imgMouse');
dragObject(oImg);
})
function inputPic(file) {
inputPic(file)
}
</script>
</body>
</html>
二：js压缩部分（如果文件尺寸大于1024则压缩上传）
function inputPic(file) {
if (!file.files || !file.files[0]) {
alert('请选择一个处方图片', 2);
return;
}
zipImg($('#picInput')[0].files[0], f => {
this.file = f;
console.log(f);
var fileName = $('#picInput').val();
var reader = new FileReader();
reader.onload = function(evt) {
document.getElementById('imgMouse').src = evt.target.result;
document.getElementById('imgMouse').style.width = "600px";
document.getElementById('imgMouse').style.height = "800px";
document.getElementById('imgMouse').style.top = "10px";
document.getElementById('imgMouse').style.left = "10px";
image = evt.target.result;
}
this.timer = setTimeout(() => { //设置延迟执行
reader.readAsDataURL(file.files[0]);
}, 300);
});
}
//压缩图片
function zipImg(imgFile, func) {
var that = this;
console.time('图片压缩:' + imgFile.name);
if (imgFile.size / 1024 > 500) { //如果文件尺寸大于1024则压缩上传
this.photoCompress(imgFile, {
quality: 0.2
}, function(base64Codes) {
var imgData = that.convertBase64UrlToBlob(base64Codes);
var newFile = new File([imgData], imgFile.name);
console.timeEnd('图片压缩:' + imgFile.name);
func(newFile);
});
} else {
console.timeEnd('图片压缩:' + imgFile.name);
func(imgFile);
}
}
/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
*/
function photoCompress(file, w, objDiv) {
var ready = new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
var that = this;
ready.onload = function() {
var re = this.result;
that.canvasDataURL(re, w, objDiv)
}
}
function canvasDataURL(path, obj, callback) {
var img = new Image();
img.src = path;
img.onload = function() {
var that = this;
// 默认按比例压缩
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 图像质量
if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
quality = obj.quality;
}
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
}
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData) {
var arr = urlData.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
三：dragObject.js部分（可放与js文件）
var ie = document.all;
var nn6 = document.getElementByIdx && !document.all;
var isdrag = false;
var y, x;
var oDragObj;
var imgObj;
function dragObject(oImg) {
imgObj = oImg;
function fnWheel(obj, fncc) {
obj.onmousewheel = fn;
if (obj.addEventListener) {
obj.addEventListener('DOMMouseScroll', fn, false);
}
function fn(ev) {
var oEvent = ev || window.event;
var down = true;
if (oEvent.detail) {
down = oEvent.detail > 0
} else {
down = oEvent.wheelDelta < 0
}
if (fncc) {
fncc.call(this, down, oEvent);
}
if (oEvent.preventDefault) {
oEvent.preventDefault();
}
return false;
}
};
fnWheel(oImg, function (down, oEvent) {
var oldWidth = this.offsetWidth;
var oldHeight = this.offsetHeight;
var oldLeft = this.offsetLeft;
var oldTop = this.offsetTop;
var scaleX = (oEvent.clientX - oldLeft) / oldWidth; //比例
var scaleY = (oEvent.clientY - oldTop) / oldHeight;
if (down) {
this.style.width = this.offsetWidth * 0.9 + "px";
this.style.height = this.offsetHeight * 0.9 + "px";
} else {
this.style.width = this.offsetWidth * 1.1 + "px";
this.style.height = this.offsetHeight * 1.1 + "px";
}
var newWidth = this.offsetWidth;
var newHeight = this.offsetHeight;
this.style.left = oldLeft - scaleX * (newWidth - oldWidth) + "px";
this.style.top = oldTop - scaleY * (newHeight - oldHeight) + "px";
});
}
function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";
if ((nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) > 700)
oDragObj.style.top = "700px";
if ((nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) < -750)
oDragObj.style.top = "-750px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";
if ((nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) > 350)
oDragObj.style.left = "350px";
if ((nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) < -550)
oDragObj.style.left = "-550px";
return false;
}
}
function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.id != imgObj.id) {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.id == imgObj.id) {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top + 0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left + 0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove = moveMouse;
return false;
}
}
document.onmousedown = initDrag;
document.onmouseup = new Function("isdrag=false");
就这么简单可以随意放大缩小与拖拽了，看见好的东西随手记录以备后用
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
