How to Create a Thumbnail Image with Ionic

ionic-thumbnail-images

When working on apps with image upload functionality, many times you either need to resize the image or to create something like a preview image for later requests. It’s not a super straight forward thing to to, so here’s how we can create a preview image with Ionic.

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

This Quick Win is about choosing a picture from the library (you can of course also capture a new one) and calculate the size of the image. Then we will create a preview image as a thumbnail from that image and see what size we have with the new image. Spoiler: You can see it inside the little animation below!

thumbnail-preview

Starting a new App

We start with a blank Ionic app and install the Camera plugin so we have something to work with. Go ahead and run:

Now also make sure to add the Camera to your providers inside the src/app/app.module.ts like this:

We don’t need anything else as we will resize the image with the canvas so there’s no need for another external package!

Loading Images and creating a Preview Image

First of all we need our very basic view with buttons to load and image and to create the thumbnail. Additional we have the 2 images plus the size for both of them which we will calculate in the actual class. The view really is very dumb here, so change your src/pages/home/home.html to:

Now the actually hard part of this Quick Win begins.

The first step is simple: Inside our loadImage() function we use the Camera plugin to load an image from the camera. We specify the quality to be 100% so we can see the difference to the thumbnail later.

Of course changing the quality here will also result in a smaller image and most of the time it makes sense to drop at least some percent here. But if you want the best resolution of your users image and also a thumbnail which can be delivered faster, this approach here will work better.

Anyway, after the picture data is there we call our getImageSize() function to get the size of that image. I didn’t came up with that solution but can’tĀ find the exact solution on SO again. Overall we need to multiplay it with 6 because of how base64 works and divide it by 8 to convert bits into bytes. Of course this means we can also use it like * 3 / 4!

The last additions are to convert that number into MB, so just some more math going on here. But this is not critical to creating our thumbnail.

To create a thumbnail image we call the generateFromImage() function with a few parameters for the size and quality and get the result inside the callback. This is the function you can copy directly into your code of you need the logic for a thumbnail!

The function takes a few steps to create a canvas element with an image. It will draw the image on that canvas with the specific size and afterwards convert the canvas back to a base64 image string but with the specified quality.

In our app we again assign that new image to a variable and calculate the size of it so our view will be updated.

Now go ahead and change your src/pages/home/home.ts to:

That’s all ne weed, and most of it lives in that one function. Make sure to run your app on a device or simulator now as the Cordova plugin won’t work on a browser!

Hopefully this will help you to dramatically reduce the size of your images especially if you work with lists of images where a preview image renders way faster than some 5 MB pictures.

You can also find a video version of this Quick Win below.

  • Piet Crombach

    Nice tutorial. I finished last week in my app a function to take a photo with camera and generate a thumbnail. I used a Cordova plugin Imageresizer. I just wonder if there is a all JavaScript solution that takes a jpeg Image and generate a jpeg thumbnail.