Как обрезать изображение / просмотреть изображение у пользователя перед его загрузкой?

#javascript #jquery #file-io

#javascript #jquery #file-io

Вопрос:

Я хочу, чтобы пользователь загрузил свою фотографию.

После того, как он выберет изображение со своего локального компьютера, моя конечная цель — сохранить эскизы этого изображения определенных размеров (прямоугольных). Чтобы сохранить соотношение сторон, я должен предложить пользователю обрезать это изображение, а затем я создам для него эскизы.

Для этого я придумал способ сначала загрузить, а затем просмотреть изображение пользователю
, а затем я бы использовал внешний плагин (jcrop, я думаю), чтобы обрезать это изображение
, а затем, наконец, отправить его на сервер.

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

 <input type="file" onclick="preview(this)" >
 

с помощью JS :

 function preview()
{
 alert(this.value);
 //code to append the image content in some div.
}
 

но я могу видеть только окончательное имя файла в окне предупреждения (например abc.jpg ), а не весь путь (например, /home/ бла / бла .. /abc.jpg )

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

Ответ №1:

То, что вы пытаетесь заархивировать, на самом деле невозможно: захват изображения с локального компьютера пользователя с помощью JavaScript. (Какая проблема безопасности).

Но в некоторых браузерах (только думает, что это chrome) вы можете использовать этот метод: http://html5demos.com/file-api-simple