Hệ thống Vấn đề resize và crop ảnh thumbnail

Thành viên mới
Trong NukeViet 4.3 có 2 cấu hình ảnh thumbnail là: Resize và crop ảnh theo kích thước, Resize và crop top ảnh theo kích thước. Nhưng mình thấy nó đang hoạt động không đúng. Nó chỉ crop được khoảng 60% đến 70% của bức ảnh mà không phải chỉ cắt chiều thừa của bức ảnh.
img-2017-12-25-04-19-06-1.png
Ảnh gốc là 2000 x 1250, ảnh thumbnail cấu hình là 350 x 219 cùng tỉ lệ với ảnh gốc. Đáng nhẻ khi up lên thì ảnh thumbnail không bị cắt mất phần nào của ảnh nhưng nó lại bị cắt.
Bản chất của Resize và crop ảnh là cắt đi chiều thừa của bức ảnh. Pro nào khai sáng vụ này giúp mình với.
 
--= Roll With The Wind =--
Quản trị viên
Crop còn tuỳ kiểu crop. Quan trọng là lấy mốc từ đâu.
Resize cũng có nhiều kiểu resize. Quan trọng là cấu hình thế nào.

Resize thì nó sẽ kéo theo 1 chiều ( ngang hoặc dọc) hoặc hai chiều ( giữ nguyên tỷ lệ), tuỳ theo bạn cấu hình.
Mục đích cũng là thu nhỏ hình ảnh, nhưng không xâm phạm vào chi tiết hình ảnh. Nên nếu chỉ kéo theo một chiều, ảnh sẽ bị méo mó do sai tỉ lệ. Do đó nó sẽ có cái Keep Aspect Ratio, bảo toàn tỷ lệ ảnh. Ví dụ ảnh là 1500x500. Khi nén xuống 1/2 thì nó sẽ là 750x250, giảm đều.

Crop lại là chuyện khác. Nó sẽ cắt ảnh đi, như bạn hiểu là cắt "ảnh thừa" cũng được.
Mốc crop có thể từ rìa ảnh vào hoặc từ trung tâm ảnh đi ra.
Ảnh mà bạn đưa trong bài viết trên là lấy từ tâm ảnh đi ra. Nếu dùng song song hai chức năng thì bạn sẽ có kq như trên thôi: Đầu tiên resize xuống kích thước gần nhất, giữ nguyên tỉ lệ. Sau đó crop từ trung tâm ảnh ra ngoài.
Tại sao lại nói là kích thước gần nhát, vì Resize giữ nguyên tỉ lệ nên chỉ có 1 chiều đạt kích thước bạn cần thôi. Chiều còn lại có thể nhỏ hơn hoặc lớn hơn. Nhỏ thì giữ lại, lớn hơn thì crop.

Nói nhiều quá ko biết nói đúng không :(
 
Thành viên mới
Ảnh mà bạn đưa trong bài viết trên là lấy từ tâm ảnh đi ra. Nếu dùng song song hai chức năng thì bạn sẽ có kq như trên thôi: Đầu tiên resize xuống kích thước gần nhất, giữ nguyên tỉ lệ. Sau đó crop từ trung tâm ảnh ra ngoài.
Tại sao lại nói là kích thước gần nhát, vì Resize giữ nguyên tỉ lệ nên chỉ có 1 chiều đạt kích thước bạn cần thôi. Chiều còn lại có thể nhỏ hơn hoặc lớn hơn. Nhỏ thì giữ lại, lớn hơn thì crop.

Nói nhiều quá ko biết nói đúng không :(
Theo mình hiểu Resize và crop ảnh theo kích thước là: Resize giữ nguyên tỉ lệ khi chiều nào đạt đến kích thước trước thì dùng lại. Khi đó chiều còn lại thì chắc chắn sẽ lớn hơn nên crop.

Hiểu theo cách của bác hay cách của em thì ảnh thumbnail phải có một chiều không bị cắt nhưng ở trên đều bị cắt cả 2 chiều.

Điều đáng nói ở trên là ảnh gốc của mình tỉ lệ với ảnh thumbnail cả chiều cao lẫn chiều rộng. Nên ảnh thumbnail bị cắt bớt đi là rất vô lý.

Em đã thử đưa ảnh gốc về bằng với kích thước ảnh thumbnail và up lên thì vẫn bị cắt như hình. Ảnh gốc là 350 x 219. thumbnail cấu hình là Resize và crop ảnh theo kích thước 350 x 219. Đúng ra là nó khong bị cắt vì nó cùng kích thước cơ mà

img-2017-12-25-08-31-03-1.png
 
--= Roll With The Wind =--
Quản trị viên
Theo mình hiểu Resize và crop ảnh theo kích thước là: Resize giữ nguyên tỉ lệ khi chiều nào đạt đến kích thước trước thì dùng lại. Khi đó chiều còn lại thì chắc chắn sẽ lớn hơn nên crop.

Hiểu theo cách của bác hay cách của em thì ảnh thumbnail phải có một chiều không bị cắt nhưng ở trên đều bị cắt cả 2 chiều.

Điều đáng nói ở trên là ảnh gốc của mình tỉ lệ với ảnh thumbnail cả chiều cao lẫn chiều rộng. Nên ảnh thumbnail bị cắt bớt đi là rất vô lý.

Em đã thử đưa ảnh gốc về bằng với kích thước ảnh thumbnail và up lên thì vẫn bị cắt như hình. Ảnh gốc là 350 x 219. thumbnail cấu hình là Resize và crop ảnh theo kích thước 350 x 219. Đúng ra là nó khong bị cắt vì nó cùng kích thước cơ mà

View attachment 2450
Bạn hiểu chưa đúng thôi.
Crop có nhiều cấu hình mà.
 
Thành viên mới
Bạn hiểu chưa đúng thôi.
Crop có nhiều cấu hình mà.
Mình có nói rỏ là cấu hình theo:
"Resize và crop ảnh theo kích thước" mà
VD: Ảnh gốc là 300 x 100, thumbnail là 150 x 100 thì chỉ cần bước Resize và bỏ qua bước crop. Vì chắc chắn ảnh đó khi Resize về khích thước 150 x 100 thì không thừa cũng không thiếu thì cần gì crop nữa. Nhưng nukeviet vẫn crop và bỏ đi mất 30% - 40% bức ảnh.

https://polyetilen.lt/en/resize-and-crop-image-from-center-with-php
 
Lần sửa cuối: Mười hai 26, 2017 lúc 10:45 AM
Thành viên năng động
Chuẩn nhất là Fixed (width or heigh) giá trị còn lại là Auto, thì sẽ không bị cắt xén nữa ..
 
Thành viên mới
Chuẩn nhất là Fixed (width or heigh) giá trị còn lại là Auto, thì sẽ không bị cắt xén nữa ..
Như vậy thì ảnh cái thụt cái thò thì website ra cái thể thống gì.
 
Thành viên năng động
Nếu mong muốn không thụt và thò theo dạng Fixed, tốt nhất lời khuyên là : phải có một Album hình ảnh chuẩn kích thước (nếu là hàng sao chép) phải Crop và Resize chuẩn một loại kích thước hoặc %.... Kiểu Fixed lệ thuộc nguồn hính ảnh bạn có. Còn cái kiểu lười trây ra, cứ copy ... paste .. post ... thì đừng có mong Source_code nào rãnh rỗi shared Free
 
Thích: anhyeuviolet
--= Roll With The Wind =--
Quản trị viên
Nếu mong muốn không thụt và thò theo dạng Fixed, tốt nhất lời khuyên là : phải có một Album hình ảnh chuẩn kích thước (nếu là hàng sao chép) phải Crop và Resize chuẩn một loại kích thước hoặc %.... Kiểu Fixed lệ thuộc nguồn hính ảnh bạn có. Còn cái kiểu lười trây ra, cứ copy ... paste .. post ... thì đừng có mong Source_code nào rãnh rỗi shared Free
Đúng rồi. Ảnh Upload lên phải được xử lý trước khi upload thì mới đều, đẹp và đúng ý được.
Chức cứ cả mớ đưa lên, ảnh cao anh thấp thì ... :D
 
Thành viên mới
Nếu mong muốn không thụt và thò theo dạng Fixed, tốt nhất lời khuyên là : phải có một Album hình ảnh chuẩn kích thước (nếu là hàng sao chép) phải Crop và Resize chuẩn một loại kích thước hoặc %.... Kiểu Fixed lệ thuộc nguồn hính ảnh bạn có. Còn cái kiểu lười trây ra, cứ copy ... paste .. post ... thì đừng có mong Source_code nào rãnh rỗi shared Free
- 2 tính năng
+ Resize và crop ảnh theo kích thước
+ Resize và crop top ảnh theo kích thước

Là tính năng có trong hệ thống NukeViet 4.3 và mình thấy nó chưa tối ưu nên đưa lên đây. Cái này là giúp cho cả cộng đồng chứ không riêng mình mình. Mình cũng đâu có yêu cầu phải xử lý hay shared Free cho mình.

Có thể do mình nói không tốt nên mọi người chưa hiểu ý của mình.
Mình xin giải thích lần nữa vấn đề.
- Mình đưa thêm ví dụ cho mọi người đó là trang flickr.com ảnh up lênđây nhiều kích thước dọc, ngang khác nhau nhung khi chọn hiểu thị
"Xem ảnh thu nhỏ" img-2018-01-05-01-35-23-1.png thì tất cả các ảnh để là hình vuông được Resize và Crop từ tâm ra chỉ cắt chiều cao hoặc chiều rộng nếu thừa. Xem ảnh
img-2018-01-05-01-47-59-1.png

Nếu là NukeViet và dùng tính năng + Resize và crop ảnh theo kích thước. Cũng lấy từ tâm ra. Thì sẽ đục một lỗ như thế này.

img-2018-01-05-01-40-37-1.png
Một ví dụ nữa mọi người có thể xem thêm video dưới đây.

Nếu đọc kỹ, xem video và thử dùng 2 chức năng
+ Resize và crop ảnh theo kích thước
+ Resize và crop top ảnh theo kích thước
của NukeViet 4.3 mà vẫn không hiểu vấn đề mình nói thì mình cũng hết cách giải thích rồi.

MÌnh không nói vấn đề đẹp hay xấu nhé mà vấn đề là tối ưu nhất có thể cho người dùng.

- Mình là designer nên việc xử lý ảnh, Resize và Crop không phải là vấn đề với mình. Nhưng với đa số khách hàng và người dùng bình thường lại là vấn đề.
 
--= Roll With The Wind =--
Quản trị viên
Thử với cấu hình như ảnh:
C1.png

Ảnh upload lên thử :
123.png

Hình thumb trong assets:

123.png
 
--= Roll With The Wind =--
Quản trị viên
Thử tiếp :
C2.png
Ảnh thumb thu được:
123.png

Crop từ top xuống cho đủ 400.
Vậy vấn đề là gì ?
 
Thành viên mới
Thử với cấu hình như ảnh:
View attachment 2473

Ảnh upload lên thử :
View attachment 2474

Hình thumb trong assets:

View attachment 2475
Cài này rỏ là có vấn đề mà, đáng ra Hình thumb trong assets phải thế này
img-2018-01-08-01-15-55-1.png
Chứ không phải như này
img-2018-01-08-01-21-55-1.png
 
Thành viên mới
Thử tiếp :
View attachment 2476
Ảnh thumb thu được:
View attachment 2477

Crop từ top xuống cho đủ 400.
Vậy vấn đề là gì ?
Ok cái này thì không vấn đề gì.

Em có test tất cả các trường hợp cho 2 phương án
+ Resize và crop ảnh theo kích thước
+ Resize và crop top ảnh theo kích thước

thì thấy vấn đề thế này:

1, Nếu cấu hình"Kích thước thumbnail của hình là vuông" thì:
  • Ảnh upload lên là hình Vuông =>Hình thumb trong assets Ok
  • Ảnh upload lên là hình chữ nhật ngang, dọc => Hình thumb trong assets Ok
2, Nếu cấu hình "Kích thước thumbnail của hình là hình chữ nhật ngang (chiều rộng lớn hơn chiều cao)" thì:
  • Ảnh upload lên là hình Vuông =>Hình thumb trong assets Ok
  • Ảnh upload lên là hình chữ nhật ngang=> Hình thumb trong assets Có vấn đề
  • Ảnh upload lên là hình chữ nhật dọc=> Hình thumb trong assets OK
3, Nếu cấu hình"Kích thước thumbnail của hình là hình chữ nhật dọc (chiều rộng nhỏ hơn chiều cao)" thì:
  • Ảnh upload lên là hình Vuông => Hình thumb trong assets Ok
  • Ảnh upload lên là hình chữ nhật ngang=> Hình thumb trong assets OK
  • Ảnh upload lên là hình chữ nhật dọc=> Hình thumb trong assets Có vấn đề
 
--= Roll With The Wind =--
Quản trị viên
Bạn nêu dùm mình Có vấn đề là như thế nào, mình muốn test thêm.
 
Thành viên mới
Bạn nêu dùm mình Có vấn đề là như thế nào, mình muốn test thêm.
+ Resize và crop ảnh theo kích thước
Là đúng ra nó chỉ cắt đi cạnh trên và cạnh dưới hoặc cạnh trái và phải của tấm hình thôi. Nhưng nó lại cắt cả 4 cạnh​

+ Resize và crop top ảnh theo kích thước
Là đúng ra nó chỉ cắt đi cạnh dưới hoặc cạnh phải của tấm hình thôi. Nhưng nó lại cắt cả cạnh dưới và cạnh phải​

VD: Em có hình up là 600x345 thumb cấu hình là 280x230.

Hình up:
600x345.png

Nếu chuẩn thumb chiều cao không bị cắt mà chỉ cắt chiều rộng.
img-2018-01-08-07-58-39-1.png 800x460 2.png

Còn NukeViet nó lại thế này cắt cả chiều cao và chiều rộng. cắt gần hết phần màu đỏ và màu tím
img-2018-01-08-08-03-26-1.png 800x460 (1).png

Hình chữ nhật dọc cũng bị tương tự như vậy.
 

Attachments

Lần sửa cuối: Một 8, 2018 lúc 3:18 PM