我想创建允许用户将图像拖放到页面各个部分的框中的网页，以便他们可以使用图像打印页面。
我希望图像在框中掉落时自动调整大小。我将http://html5demos.com/file-api的一些代码与http://html5demos.com/file-api-simple中的一些代码结合起来得到了我想要的东西。
在当前版本的代码（下面）中，图像宽度不会在您第一次将图像放入框中时调整大小，但它会在第二次执行时调整大小。
任何建议如何在第一次将图像放入框中时自动调整图像宽度？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>HTML5 Test</title>
</head>
<body>
<header>
<h1>HTML5 Test 1</h1>
</header>
<style>
#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }
</style>
<article>
<div id="holder"></div>
<p id="status">File API & FileReader API not supported</p>
<p>Drag an image from your desktop on to the drop zone above to see the browser read the contents of the file - without uploading the file to any servers.</p>
</article>
<script>
var holder = document.getElementById('holder'),
state = document.getElementById('status');
if (typeof window.FileReader === 'undefined') {
state.className = 'fail';
} else {
state.className = 'success';
state.innerHTML = 'File API & FileReader available';
}
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
this.className = '';
e.stopPropagation();
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
img.src = event.target.result;
// note: no onload required since we've got the dataurl...I think! :)
if (img.width > 300) { // holder width
img.width = 300;
}
holder.innerHTML = '';
holder.appendChild(img);
};
reader.readAsDataURL(file);
return false;
};
</script>
</body>
</html>
是的。使用这个人的来源：
基于http://demos.hacks.mozilla.org/openweb/DnD/dropbox.css用于http://demos.hacks.mozilla.org/openweb/DnD/的一些CSS，我找到了一个简单的答案，我认为它非常适合我的需求。
在我上面的问题中包含的代码中，我将其添加到CSS代码中：
#holder > * {
display: block;
margin: auto;
max-width: 300px;
max-height: 300px;
}
我删除了这个：
if (img.width > 300) { // holder width
img.width = 300;
}