Resize image functionality can be used in several scenarios in Windows Store app, for example: if your app allow the user to download images from the web you might want to resize the image to reduce space usage. Also if you whish to share this image using Roaming Storage you need to make sure the image size is small enough so the Roaming sync will not failed.
The first steps for this demo is using FileOpenPicker to allow the user to choose what picture he want to resize.
- Open package.appxmanifest and add “Pictures Library” capability. (We’ll use this later)
- Open home.html file located under pages->home and add the following code:
The above code added a button, img and div elements to home.html page, the button will invoke the FileOpenPicker, img element will display the selected image and the imageDetails div will display the image properties.
- Open home.js and add the following code jus under the “use strict” statement:
Those functions are helpers for our project.
- Under ready function add the following code:
We’re adding event listener for click event on “btnBrowse” button, now let implement the FileOpenPicker.
- Add the following code under the close statement of ready function:
Once you click on the “Pick a Image” button the file picker dialog will appear allowing you to select a single image. As pickSingleFileAsync return a promise, after the FileOpenPicker dialog is closed we received the file you pick.
First we assign the file to selectedImage object, using URL.createObjectURL we transform the file into blob and assign to the image.src property and finally we call – getImagePropertiesAsync function to retrieve image properties so we can display them on the html page.
When if you run the application you can pick and image using the “Pick a Image” button and the result should be like that:
- Open home.html page and add the following code under the preview div element:
We add two input elements allowing you to define the desire size of the image and a button element to invoke the resize function.
- Open home.js and add the following code under the $("#btnBrowse").addEventListener statement.
We’re adding event listener for click event on “btnResize” button, now let implement the resizeImage function.
- We don’t want to change the original image in our case so the resizeImage will open the FileSavePicker allowing the user to choose where he want to save the resized image.
The above code check is the input elements for width and height are not empty and then open the FileSavePicker, once the user choose a target file we’ll use the copyAndReplaceAsync function to copy the selected image to the target file the user has selected, finally we call the _resize function passing the width, height and the copied image object.
- Now to the final part, let’s implement the resize function, add the following code after resizeImage close statement:
the _resize function calling the openAsync function on the target file to obtaint he file stream then creating stream decoder using Windows.Graphics.Imaging.BitmapDecoder. Once we have the image decoder we can scale the image (I’ll talk about that in the next code example), after the scale function has completed we copy the memoryStream (where we did the scale changes) into the fileStream (target file) after the copy is complete we close both streams. it’s important to close the streams otherwise those streams are locked for other processes. (unless you open the stream only for read).
- The last part and the most important one is _scale function, this function will change the image size based on use max-height and max-width while keeping the image proportion.
First we need to check the max-height or max-width are not smaller or equal to the original size.Before changing the image size we’ll use “createForTranscodingAsync” function – creates a new BitmapEncoder and initializes it using data from an existing BitmapDecoder. We do some math to calculate the new image size and to set the new size we need to call the encoder and change the scaleWidth and scaleHeight properties located under bitmapTransform object.