Making Image Resizing API with React, Node and SharpJS
In this video I'll take you through my journey on how did I build an Front-to-back Image resizing API with Sharp Library
GitHub repo: https://github.com/MeRahulAhire/React-Node-Image-Resizing
References :
0. Sharp docs : https://sharp.pixelplumbing.com/
1. Process images the right way with SharpJS | Image cropping, reducing size and more... : https://youtu.be/UoNVywzzINY
2. Formidable : https://www.npmjs.com/package/formidable
3. Base64 Encoding and Decoding in Node.js : https://attacomsian.com/blog/nodejs-base64-encode-decode
4. NodeJS write binary buffer into a file : https://stackoverflow.com/questions/12868089/nodejs-write-binary-buffer-into-a-file
5. Creating a Blob from a base64 string in JavaScript : https://javascriptinfo.com/view/4873/creating-a-blob-from-a-base64-string-in-javascript
6. b64-to-blob : https://www.npmjs.com/package/b64-to-blob
7. Download Blob as file in JavaScript : https://randomtutes.com/2019/08/02/download-blob-as-file-in-javascript
8. js-file-download : https://www.npmjs.com/package/js-file-download
? Alert :
At 10:28 contentType should actually be files.image.type
i.e const contentType = files.image.type which is corrected at 33:10
⚠ I don't know some part of the video is flickering as I just updated my Davinci Resolve 17. I tried many times to fix it but none of them worked. I'm sorry for any inconvenience
Timeline:
00:00 - Preface
00:15 - Image Resize vs Compression
02:00 - Why Sharpjs?
02:52 - Intro to Formidable
03:45 - Getting Started in vscode
10:35 - Using Sharp to resize image
14:15 - Converting Buffer to Blob
18:43 - Working in React
24:42 - Sending Image to server
27:20 - Creating blob from base64
30:35 - Download file from blob
34:48 - Like, Share, Subscribe
Checkout the other videos of DevTalks: https://www.youtube.com/playlist?list=PL83X-jRLQqGGOXn5eJU_JJTlXUyC3gXQB
If you have any suggestions, Queries or any though just leave it in comment and I'll be happy to get back to you
#Sharpjs #ImageResize #API
FIND ME HERE:
facebook: https://facebook.com/MeRahulAhire
Instagram: https://instagram.com/merahulahire
Twitter: https://twitter.com/MeRahulAhire
LinkedIn: https://linkedin.com/in/merahulahire
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «Making Image Resizing API with React, Node and SharpJS», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.