Nhờ giúp đỡ về chức năng Reset ảnh

[votruonggiang1990]

Chào mọi người, mình đang tập viết một đoạn code JS cụ thể là Jquery cho phép up ảnh và resize kích thước theo ý muốn. Hai chức năng này thì đã chạy ngon.
Giờ mình muốn làm thêm chức năng reset lại ảnh về kich thước ban đầu (sau khi đã resize ) nhưng mình vẫn chưa viết được.
Vì thế mình muốn nhờ mọi người giúp đỡ mình chức năng này và mong mọi người góp ý thêm cho code của mình hoàn thiện hơn.

Linh demo mình để dưới này:
https://fiddle.jshell.net/truong_giang_vo/xzt9eayn/1/

Cám ơn mọi người nhiều !

[votruonggiang1990]

Có ai rảnh không support mình với

[Dao_An (Đào An)]

Lấy width và height của ảnh sau khi render ảnh, rồi khi click vào Reset thì gán lại giá trị này vào w,h của ảnh cần hiển thị.

[votruonggiang1990]

Lấy width và height của ảnh sau khi render ảnh, rồi khi click vào Reset thì gán lại giá trị này vào w,h của ảnh cần hiển thị.

Cám ơn bạn, mình cũng nghĩ đến phương án đó, nhưng cách đó áp dụng với trường hợp khi bạn up lên chỉ 1 ảnh còn ở đây mình để chế độ cho phép up nhiều ảnh lên cùng một lúc , khi đó mình thấy nó hơi rối nên … không biết phải xử lý thế nào

[Dark.Hades (Ichiro)]

$('.reset').click(function(){
   $('img').width('auto').height('auto')
})

Cách khác là remove nó luôn, nhưng về hiệu suất thì nên gán hơn là delete

[votruonggiang1990]

$(’.reset’).click(function(){
$(‘img’).width(‘auto’).height(‘auto’)
})

Cách khác là remove nó luôn, nhưng về hiệu suất thì nên gán hơn là delete

Ặc ặc … cách này hồi sáng mình có viết mà không được … giờ chạy thử thì ngon luôn …Mình thề đấy
kỳ thật … ko biết bị tàu hỏa nhập ma hay sao nữa.

Tks bạn nha

[votruonggiang1990]

Sau khi đã upload lên và resize kích thước xong rồi mình muốn làm thêm chức năng Download (tất cả ảnh ) về. Không biết JS có làm được chức năng này không.

Mình có kiếm trên Google mà không tìm được tài liệu, mong mọi người tư vấn thêm phần này giúp mình luôn ạ.

Cám ơn mọi người !

[votruonggiang1990]

làm thêm chức năng Download

Liệu có làm được cái này bằng JavaScript vs Jquery không mọi người

[Dark.Hades (Ichiro)]

miễn là ảnh đó được đặt ở server cùng domain với domain hiển thị trên browser.
dùng ajax, kéo nội dung ảnh về, lưu dưới dạng base64 hoặc Blob().
tiếp theo là tạo nút download.
// Browser hầu hết hỗ trợ Blob, có thể trực tiếp gán vào href của thẻ a

[leHoai]

Sao bạn không backup (clone) ảnh gốc dưới dạng base64 hoặc blob nhỉ. Rồi khi reset ảnh thì chỉ cần display lại ảnh từ ảnh backup này thôi?

[votruonggiang1990]

Có mấy từ ngữ các bạn nói mình chưa có hiểu vì chưa học tới những cái đó.

Mình có lẽ sẽ phải tìm hiểu thêm tài liệu về mấy thứ đó. Cám ơn 2 bạn đã suppor mình !

[Vong_Hoang_Tuong (null)]

Bạn resize bằng CSS thì đâu có tác dụng gì Như này thì muốn reset chỉ cần .removeAttr('style'). Để thực sự resize và giảm kích thước ảnh thì bạn cần dùng đến canvas.
Đừng backup bằng blob, vì nó sẽ làm tràn bộ nhớ (memory leaks) nếu lưu quá nhiều.
Mình thấy không cần phải backup làm gì, vì ảnh bạn lấy từ máy nên tốc độ load khá nhanh. Nếu ảnh quá lớn đến nỗi load chậm thì việc backup bằng base64 là không nên.
Tải thủ công thì chỉ việc thêm attribute download vào liên kết. Tải tự động thì dùng FileSaver.js. Nếu muốn tải hàng loạt thì nén lại bằng JSZip trước khi tải.

[votruonggiang1990]

Bạn resize bằng CSS thì đâu có tác dụng gì Như này thì muốn reset chỉ cần .removeAttr(‘style’). Để thực sự resize và giảm kích thước ảnh thì bạn cần dùng đến canvas.

Tks bạn nhiều nha, bạn nói thì mình mới để ý, cái resize bằng CSS đúng là nó chỉ thay đổi kích thước trên web còn khi tải ảnh về thì nó vẫn là ảnh cũ.

Đừng backup bằng blob, vì nó sẽ làm tràn bộ nhớ (memory leaks) nếu lưu quá nhiều.
Mình thấy không cần phải backup làm gì, vì ảnh bạn lấy từ máy nên tốc độ load khá nhanh. Nếu ảnh quá lớn đến nỗi load chậm thì việc backup bằng base64 là không nên.
Tải thủ công thì chỉ việc thêm attribute download vào liên kết. Tải tự động thì dùng FileSaver.js. Nếu muốn tải hàng loạt thì nén lại bằng JSZip trước khi tải.

Cám ơn bạn đã cho mình những gợi ý. Mình sẽ tìm hiểu thêm.
Hi vọng sau này còn khúc mắc gì mong được các bạn support mình thêm .