将图像拖放到网页中，并使用HTML File API自动调整大小 [英] dragging and dropping images into a Web page and automatically resizing them with HTML File API
问题描述
我想创建允许用户将图像拖放到页面各个部分的框中的网页，以便随后可以使用图像打印页面。
I want to create Web pages that allow users to drag and drop images into boxes in various parts of the page, so that they can then print the pages with their images.
我想让图片在框中放大后自动调整大小。我将某些代码与 http://html5demos.com/file-api 中的一些代码相结合在 http://html5demos.com/file-api-simple 获得像我想要的东西。
I want the image to automatically resize when it's dropped in the box. I combined some of the code at http://html5demos.com/file-api with some of the code at http://html5demos.com/file-api-simple to get something like I want.
在当前版本的代码（下图）中，首次将图像放入框中时，图像宽度不会调整大小，但第二次。
In the current version of the code (below), the image width does not resize the first time you drop the image into the box, but it does the second time.
任何建议，如何第一次将图像放入框中时，我可以如何自动调整图像宽度？
Any suggestions how I can get the image width to resize automatically the first time you drop the image into the box?
<!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中的一些CSS。用于 http：//演示的mozilla.org/openweb/DnD/dropbox.css .hacks.mozilla.org / openweb / DnD / 。
I found a simple answer that I think works really well for my needs, based on a bit of CSS in http://demos.hacks.mozilla.org/openweb/DnD/dropbox.css used for http://demos.hacks.mozilla.org/openweb/DnD/.
在我上面列出的代码中，我将其添加到CSS代码中： / p>
In the code I included in my question above, I added this to the CSS code:
#holder > * {
display: block;
margin: auto;
max-width: 300px;
max-height: 300px;
}
我删除了这个：
if (img.width > 300) { // holder width
img.width = 300;
}
这篇关于将图像拖放到网页中，并使用HTML File API自动调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
