【发布时间】：2018-02-03 09:19:15
【问题描述】：
如何在 HTML 页面上拖放多个图像，在客户端调整图像大小并将调整大小的图像下载到计算机？我想在没有任何服务器端处理的情况下完成此操作。
我尝试了以下解决方案，其中可以上传一张图片（使用拖放）并调整大小并显示在页面上，我如何将其扩展到多张图片？
// Required for drag and drop file access
jQuery.event.props.push('dataTransfer');
$(function(){
var dropTimer;
var dropTarget = $('.dragArea');
var fileInput = $('#imageFile');
dropTarget.on("dragover", function(event) {
clearTimeout(dropTimer);
if (event.currentTarget == dropTarget[0]) {
dropTarget.addClass('over');
}
return false; // Required for drop to work
});
dropTarget.on('dragleave', function(event) {
if (event.currentTarget == dropTarget[0]) {
dropTimer = setTimeout(function() {
dropTarget.removeClass('over');
}, 200);
}
});
handleDrop = function(files){
dropTarget.removeClass('over');
var file = files[0]; // Multiple files can be dropped. Lets only deal with the "first" one.
if (file.type.match('image.*')) {
resizeImage(file, 1000, function(result) {
$('#resultImage').attr('src', result);
$('.resultImageWrapper').show();
});
} else {
alert("That file wasn't an image.");
}
};
dropTarget.on('drop', function(event) {
event.preventDefault(); // Or else the browser will open the file
handleDrop(event.dataTransfer.files);
});
fileInput.on('change', function(event) {
handleDrop(event.target.files);
});
resizeImage = function(file, size, callback) {
var fileTracker = new FileReader;
fileTracker.onload = function() {
var image = new Image();
image.onload = function(){
var canvas = document.createElement("canvas");
/*
if(image.height > size) {
image.width *= size / image.height;
image.height = size;
}
*/
if(image.width > size) {
image.height *= size / image.width;
image.width = size;
}
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0, image.width, image.height);
callback(canvas.toDataURL("image/png"));
};
image.src = this.result;
}
fileTracker.readAsDataURL(file);
fileTracker.onabort = function() {
alert("The upload was aborted.");
}
fileTracker.onerror = function() {
alert("An error occured while reading the file.");
}
};
});body {
padding: 50px;
font: 16px Helvetica;
}
.dragArea {
background-color: #efefef;
border: 3px dashed #cccccc;
border-radius: 10px;
text-align: center;
padding: 50px;
}
.dragArea.over {
border-color: #ff0000;
background-color: #FFE9EA;
}
.resultImageWrapper {
display: none;
margin-top: 50px;
text-align: center;
}
#resultImage {
box-shadow: rgba(0,0,0,0.4) 0 2px 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Angular HTML5 Preview, Crop And Upload</title>
</head>
<body>
<div class="dragArea">
<h3>Drag & Drop File Here</h3>
<h4>Or Select File:</h4>
<div>
<input type="file" id="imageFile"/>
</div>
</div>
<div class="resultImageWrapper">
<img src="" alt="" id="resultImage" width="500" />
</div>
</body>
</html>【问题讨论】：
-
如果您阅读代码中的 cmets，您会发现
// Multiple files can be dropped. Lets only deal with the "first" one.此注释是在var file = files[0]之后进行的。所以只需遍历files而不是在第一个上使用。 ps：在resizeImage，不需要FileReader，直接用image.onload = URL.createObjectURL(file)`即可。 -
@kalido 我试过这样做，但它会以我上传的相同分辨率渲染所有图像，并且调整大小不起作用。
标签： javascript jquery html css image-resizing