перетаскивание изображений на веб-страницу и автоматическое изменение их размера с помощью HTML File API - PullRequest
Новая
       35

перетаскивание изображений на веб-страницу и автоматическое изменение их размера с помощью HTML File API

3 голосов
/ 17 июня 2011

Я хочу создать веб-страницы, которые позволят пользователям перетаскивать изображения в поля в различных частях страницы, чтобы они могли затем распечатать страницы со своими изображениями.

Я хочу, чтобы изображение автоматически изменяло размер, когда оно помещалось в поле. Я соединил часть кода на 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>

Ответы [ 2 ]

0 голосов
/ 08 июля 2011

Я нашел простой ответ, который, я думаю, действительно хорошо работает для моих нужд, основанный на небольшом количестве CSS в http://demos.hacks.mozilla.org/openweb/DnD/dropbox.css, используемом для http://demos.hacks.mozilla.org/openweb/DnD/.

В коде, который я включил в мой вопрос выше, я добавил это в код CSS: 

   #holder > * {
    display: block;
    margin: auto;
    max-width: 300px;
    max-height: 300px;
}

и я удалил это: 

    if (img.width > 300) { // holder width
      img.width = 300;
  }
0 голосов
/ 28 июня 2011

Да. Использовать источник этого парня:

http://imgscalr.com/

...