diff --git a/_posts/2019-02-08-resize-images-on-the-fly.md b/_posts/2019-02-08-resize-images-on-the-fly.md index 93cbdb08..71b51af4 100644 --- a/_posts/2019-02-08-resize-images-on-the-fly.md +++ b/_posts/2019-02-08-resize-images-on-the-fly.md @@ -2,16 +2,16 @@ title: "How to resize your images on-the-fly with OpenFaaS" description: In this post Tarun from Iconscout walks us through how his company is leveraging a Serverless approach with Node.js and OpenFaaS to boost image resizing and conversion speeds of up to 4-5x. date: 2019-02-04 -image: /images/resize-on-fly.jpg +image: /images/resize-on-fly/watching-from-cave.jpg categories: - end-user - node - tutorial author_staff_member: alex -dark_background: false +dark_background: true --- -I’d like to introduce you to Tarun who is our guest-writer for today’s end-user blog post. +I’d like to introduce you to Tarun from Iconscout who is our guest-writer for today’s end-user blog post. Tarun will guide us through how to resize images on the fly with OpenFaaS. > Author bio: [Tarun Mangukiya](https://twitter.com/tarunmangukiya?lang=en-gb) is co-founder and Product Manager at [Iconscout](https://iconscout.com). He’s working on Frontend, Docker, and Serverless. Iconscout is working to migrate their codebase to serverless over the time. Currently, their all the processing jobs are powered by OpenFaaS. @@ -87,7 +87,7 @@ $ faas-cli up -f image-resize.yml We’ll check the deployed function. Then we will continue to write our image resizing functionality. -(Image here) +![Testing the function](/images/resize-on-fly/hello-world.png) The default sample function serving traffic in the OpenFaaS Portal. @@ -135,21 +135,21 @@ sharp('input.png') Let’s wrap this resizing code to our function. -You can find the full code in this GitHub repo: https://github.com/tarunmangukiya/openfaas-functions/blob/master/image-resize/handler.js +You can find the full code in this [GitHub repo](https://github.com/tarunmangukiya/openfaas-functions/blob/master/image-resize/handler.js). The way our function will work, is that the user will supply all the parameters on a query-string, and that means we can even embed resized images pointing directly at the function. -An example URL might be: http://127.0.0.1:8080/function/image-resize?height=300&width=300&url=https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg +An example URL might be: `http://127.0.0.1:8080/function/image-resize?height=300&width=300&url=https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg` So we will be fetching the image from the URL and then resizing it to the provided dimensions. These are all the parameters I’ve added: -*url:* Public URL of image -*width:* Number -*height:* Number -*download:* Download image rather than showing in browser -*fit:* Fit the image in the given width & height +* *url:* Public URL of image +* *width:* Number +* *height:* Number +* *download:* Download image rather than showing in browser +* *fit:* Fit the image in the given width & height See all the other options available in the [sharp api-resize documentation](http://sharp.dimens.io/en/stable/api-resize/). @@ -170,7 +170,7 @@ https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg You could also find your own favourite images to try out. -(IMAGE) +![The resized waterfall image](/images/resize-on-fly/waterfall.png) Try it out live with your own OpenFaaS where `$OPENFAAS_URL` is the IP address and port of your gateway. On Swarm this is usually `http://127.0.0.1:8080` diff --git a/images/resize-on-fly/hello-world.png b/images/resize-on-fly/hello-world.png new file mode 100644 index 00000000..9dac9041 Binary files /dev/null and b/images/resize-on-fly/hello-world.png differ diff --git a/images/resize-on-fly/watching_from_cave_iconscout.jpg b/images/resize-on-fly/watching-from-cave.jpg similarity index 100% rename from images/resize-on-fly/watching_from_cave_iconscout.jpg rename to images/resize-on-fly/watching-from-cave.jpg diff --git a/images/resize-on-fly/waterfall.png b/images/resize-on-fly/waterfall.png new file mode 100644 index 00000000..fa3478a5 Binary files /dev/null and b/images/resize-on-fly/waterfall.png differ