Xử lí như thế nào để chuyển đổi định dạng khi upload ảnh ở phía front-end?

#1

Ở Phía FE mọi người thường sử dụng lib nào hoặc xử lí như thế nào để đổi định dạng khi upload ảnh nhỉ. VD: ảnh đuôi .PNG khi upload lên thì đuôi sẽ chuyển đổi thành .webp hoặc svg

#2

Xử lý phía back-end cả, không ai xử lý ở front-end vì front-end cùng lắm hỗ trợ JPEG, PNG thôi, Các định dạng khác không được trình duyệt hỗ trợ sẵn, tự viết JavaScript xử lý thì quá nặng nề, treo trình duyệt luôn và chậm không chịu được đâu.

Xử lý phía back-end cũng khá đơn giản: cần thư viện cài trên server, và script gọi đến xử lý cho nhanh, cũng không cần phải code xử lý ngay trên script vì script chạy ở ngôn ngữ bậc cao, trong khi thư viện có thể chạy ở cấp thấp hơn, nhanh và tận dụng được phần cứng.

7 Likes
#3

Nếu xử lý ở nuxtjs SSR thì sao bác nhỉ. Mình có task này a lead bảo là xử lí ở SSR được nên mình đang tìm cách. Chứ nếu đổi đuôi sang thì mình có thể dùng replace được nhưng k có tác dụng

#4

Mình không hiểu bạn học trường phái nào mà hỏi mấy câu kỳ lạ vậy, đổi đuôi là đổi cái gì ở đây? Nói vậy, hóa ra bạn F2 đổi tên file .js của bạn thành .png thì nó thành hình ảnh à? Bỏ thêm thời gian học về lập trình cơ bản đi, nên học C cho có nền tảng.

Đứng ở góc độ lập trình nói chung thì chúng ta chỉ có 3 thứ dù bạn có back-end hay front-end hay gì gì đi nữa. 3 thứ đó gồm:

input => processing => output

Giờ đây, bài toán của bạn là gì?
1- input: file hình ảnh có định dạng JPEG hoặc PNG

2- processing: thực hiện chuyển đổi input ra định dạng khác. Hiện thời, bạn đang dùng ngôn ngữ lập trình là JavaScript hoặc TypeScript chạy trên môi trường NodeJS và mượn nuxjs gì đó vì bạn không muốn tự build framework cho riêng bạn (hoặc không đủ trình) theo mình hiểu,

3- output: file WEBP được lưu lại trên server.

Vì mình là người tự học lập trình tay ngang, nên mình nhìn góc độ nó không giống dân chuyên nghiệp tí nào, có thể ý kiến mình chủ quan và “gà rừng”, có thể khiến các bạn học bài bản ở đây cười hô hô, không sao, dù sao cũng cứ trình bày tiếp…

Vậy thì, vấn đề là giờ bạn xem thử nuxjs của bạn, chỉ riêng nó có hàm/ method nào đọc được file JPEG, PNG rồi convert file đó thành WEBP hay không? Nếu có, dùng hàm/ method để xử lý ngay. Nếu không, bạn có 2 hướng như sau:

  1. Có thư viện (nguồn mở, tất nhiên) JavaScript hoặc TypeScript nào được ai đó viết sẵn chạy trên môi trường NodeJS xử lý được việc đó không? Nếu có, cài cái đó vào và từ nuxjs hoặc JavaScript/ TypeScript mà bạn đang dùng gọi tới thư viện đó để đọc file input rồi convert rồi save thành output WEBP. Xong. Còn bạn đủ trình tự viết các giải thuật xử lý ảnh bằng JavaScript/ TypeScript luôn càng tốt, không ai cấm nhé, tra cứu sách các định dạng file và chuyển đổi là làm được tuốt.

  2. Không có thư viện nào chạy được trên NodeJS? Vậy thì tìm các thư viện chuyên xử lý file hình ảnh như ImageMagick, FFMPEG,… hoặc dịch vụ bên thứ 3 (hay gọi với dạng API web service gì đó) như Cloudinary, Imgur,… để nuxjs của bạn gửi input cho nó xử lý, trả về lại rồi save lại thành WEBP.

Với phương án 2, bạn phải có con VPS hoặc server và được quyền cài cắm trên đó hoặc có người hỗ trợ bạn cài giúp. Còn nếu bạn chỉ dùng ở user thường thì thua.

Giờ thì rõ rồi chứ?

3 Likes
#5

Nếu bạn đổi đuôi và sử dụng hàm dowload của js thì nó vẫn có thể nén file lại và sử dụng được nhé. Đấy là theo hướng mình nói và mình muốn xử lí 2 tác vụ cùng 1 lúc là có thể download và đổi định dạng file ngay phía FE mà BE k cần xử lí gì hết nha. đây là case lead bên mình đưa ra và cần xử lí phía FE nên mình cũng đang tìm hiểu chứ cũng chưa rõ lắm.Vấn đề là mình đã xử lí được case đầu tiên nhưng case thứ 2 thì đang là issua

1 Like
#6

Theo mình đọc và hiểu thì đoán là không phải case bạn nói rồi. Vì ở đây là chuyển sang WEBP mục đích để lưu trữ tiết kiệm dung lượng trên phía server và cũng giúp file tải về nhanh hơn.

#7

Đúng như bác Thìn nói. Không ai xử lý ở FE cả.
Tuy nhiên nếu cần thì vẫn có cách.
Mình k dùng thư viện mà tự viết bằng vài dòng js.

  canvas. Height= img.clientHeight / img.clientWidth * canvas.width;
  context.drawImage(img, 0, 0, canvas.width, canvas.height);
  // convert
  var url = canvas.toDataURL('image/webp').replace("image/webp", "image/octet-stream");
 // Lưu ảnh 
  var link = document.createElement('a');
  link.setAttribute('download', 'tiger.webp');
  link.setAttribute('target', '_blank');
  link.setAttribute('href', url);
  link.click();

Code này để lưu ảnh dạng webp, còn nếu muốn upload thì dùng url to blob. hoặc truyền trực tiếp chuỗi base 64 lên server xử lý tiếp.
Lưu ý rằng chat lượng ảnh khá tệ so với xử lý ở server.

4 Likes
#8

Phần xử lý nếu dowload nén file dùng được thì mình đã làm được rồi nhé. issua của mình là phần upload nên mình cân nhắc và sẽ báo lại với lead case này.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?