2015-05-23 4 views
3

Я использую следующее, чтобы загрузить и показать предварительный просмотр изображения перед загрузкой изображения.HTML/JS/Canvas - редактирование размера изображения перед загрузкой без base64

var oFReader = new FileReader(); 
    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 

    oFReader.onload = function(oFREvent) { 
    document.getElementById("uploadPreview").src = oFREvent.target.result; 
    }; 


<img id="uploadPreview" style="width: 100px; height: 100px;" /> 
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" /> 
<script type="text/javascript"> 
    function PreviewImage() { 
    var oFReader = new FileReader(); 
    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); 

    oFReader.onload = function(oFREvent) { 
     document.getElementById("uploadPreview").src = oFREvent.target.result; 
    }; 
    }; 
</script> 

Как надежно редактировать размеры клиентской стороны перед загрузкой изображения? Есть ли способ избежать загрузки их как капли? Я не хочу хранить изображение в db, вместо этого я хочу сохранить его как файл и сохранить запись пути в db.


+0

Возможный дубликат [Использовать HTML5 для изменения размера изображения перед загрузкой] (http://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload) – saj

+0

@saj они загрузка как blob/base64. Я не хочу сохранять или обрабатывать файл в base64. Есть ли способ обойти это? –

+0

Можете ли вы обработать его на стороне сервера? – Eva611

ответ

1

У вас действительно есть несколько вопросов здесь.

(1) Как изменить размер изображения на стороне клиента.

Вы можете использовать холст html5, чтобы изменить размер изображения на стороне клиента.

(2) Как передать изображение на сервер.

Строка Blob и Base64 - это стандартные форматы, используемые для передачи информации изображения с клиента на сервер. Эти форматы используются для транспорта, но исходный формат файла изображения может быть восстановлен на сервере. Я не знаю причины избежать использования этих стандартных форматов для целей передачи, даже если вы хотите, чтобы изображение в конечном итоге было сохранено сервером в виде файла изображения (.png, .jpg и т. Д.).

(3) Как сохранить строку Blob/Base64 на сервере в качестве файла изображения.

Оба блока Blobs и Base64 могут быть преобразованы сервером в файл изображения (.png, .jpg и т. Д.), А затем могут быть сохранены на сервере в виде файла.

Сервер может:

  • принимать входящие блоб/base64 данные:
  • Преобразование входящих данных BLOB/Base64 в формат файла изображения (png, .jpg, и т.д.)
  • Создать уникальное имя файла для файла изображения
  • Сохраните файл изображения на хранение
  • И введите имя файла в базу данных.

На все эти вопросы был дан ответ несколько раз на Stackoverflow.

Вы найдете поиск Stackoverflow даст вам ответы, которые вам нужны.

+1

Спасибо за подробное объяснение. Я был обеспокоен медленными загрузками сервера, когда загружалось слишком много изображений, и он потратил много ресурсов, преобразуя blob в изображение и т. Д. На данный момент я отдам это, и если это не подходит, я попрошу более конкретный вопрос оптимизации. Благодаря! –

Смежные вопросы