Crop và hình ảnh Tải lên sử dụng jQuery/Java

Question

Tôi đang tìm kiếm một plugin jQuery cho phép như sau:

1. Chọn/Duyệt một hình ảnh (từ hệ thống tập tin của người dùng)
2. Preview hình ảnh, với khả năng CROP
3. Tải lên ảnh đã được cắt đến máy chủ (JAVA Servlet)

Bất kỳ con trỏ cho việc này?

P.S. : Tôi đã tìm thấy nhiều plugin cắt ảnh độc lập (hoạt động trên các hình ảnh được xác định trước), nhưng không phải là các plugin cho phép tải lên một hình ảnh tùy chỉnh (trên các servlet Java).

Answer 1

Một cách, để cắt hình ảnh trước khi thực sự tải hình ảnh lên máy chủ trong trình duyệt được hỗ trợ HTML5, được giải thích here. Giải pháp được đề cập là sự kết hợp của: JCrop, JQuery, API tệp và Canvas của HTML5.

Một cách khác để đi (đối với các trình duyệt không HTML5) là:

1. ảnh Chọn/browse
2. Tải nó lên máy chủ (như hình ảnh tạm thời)
3. Preview hình ảnh, với khả năng CROP
4. Gửi CROP phối đến máy chủ
5. Crop và lưu hình ảnh trên phía máy chủ

Answer 2

Tóm lại, bạn sẽ cần phải làm theo.

Sử dụng HTML "multipart" hình thức để gửi ảnh để servlet

<form name="frm" enctype="multipart/form-data" action="/saveimage" method="POST"> 
    <input type="file" name="filetoupload" />  
    <input type="submit" value="Upload" /> 
</form> 

Trong servlet ghi tập tin này vào một thư mục "công cộng" để nó có thể truy cập đến trình duyệt. Bạn có thể sử dụng http://commons.apache.org/fileupload/ cho mục đích này trong trường hợp bạn đang sử dụng Servlets. Trong trường hợp bạn đang sử dụng khung ứng dụng web, khuôn khổ có thể cung cấp cho bạn một cách để tải lên dữ liệu nhị phân.

Trang trở lại có liên kết/tham chiếu đến hình ảnh đã tải lên. Bạn có thể muốn sử dụng một số thuật toán tạo tên tệp ngẫu nhiên để tránh va chạm tham chiếu tệp.

<img src="/public/random-image.jpg"/> 

Sử dụng JCrop http://deepliquid.com/content/Jcrop.html để nhận tọa độ cắt. Tài liệu JCrop rất chi tiết về cách sử dụng nó. Lưu ý rằng bạn cần phải khởi tạo JCrop để liên kết với tham chiếu hình ảnh ở trên.

Viết một servlet khác mà bạn có thể POST/GET các tọa độ đã cắt và thực hiện bất kỳ điều gì bạn muốn với nó.