How do I reduce the size of a WinJS image file

Can anyone help me figure out how to retrieve the size (in pixels, bytes) of a picture in a Windows 8 app? I'm using openPicker to select the file but can't seem to find the size attributes. I want to display an error message if the file is too large. Any suggestions on how to obtain this information would be greatly appreciated. Thanks!

Answer №1

To access necessary information from the StorageFile object, there's no need to open or load the file into memory.

Let's assume myFile represents the StorageFile being used.

To obtain image dimensions, utilize myFile.properties.getImagePropertiesAsync. This will return an ImageProperties object containing width and height properties. An example of how to retrieve ImageProperties can be found in the Simple imaging sample, scenario 1.

For file size, use myFile.getBasicPropertiesAsync. This function will provide a BasicProperties object with the corresponding size property value.

Answer №2

After spending several hours searching and experimenting, I finally found a solution that worked for me:

//insert image
        document.getElementById("btnAddImg").addEventListener('click', function () {
            // Create the picker object and specify options
            var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
            openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
            openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
            openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);
            openPicker.pickSingleFileAsync().then(function (file) {
                file.openAsync(Windows.Storage.FileAccessMode.read).done(function (stream) {
                    var fileType = file.contentType;
                    var blob = MSApp.createBlobFromRandomAccessStream(fileType, stream);
                    var fdata = new FormData();
                    fdata.append('upload_field', blob);
                    //additional code....
                });
            });
        });

I hope this solution can assist others facing similar challenges.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue persists as AJAX data and text box data are not being saved simultaneously

I need assistance with an Ajax setup. I am trying to pass the screenwidth information along with a user input value from a text box to a PHP page. However, I am encountering issues as the only value being passed is from the textbox and the other one is sho ...

Encountering a Next.js application error while utilizing the button tag in conjunction with generating metadata

I keep encountering an issue with generateMetaData when trying to utilize the button tag. Can you help me resolve this problem? Currently, I am working with nextjs and I am unable to properly use the <button> tag. Whenever I implement generateMetaD ...

Prioritize returning AJAX data over iterating through the parent loop

Hey everyone, I'm having trouble wrapping my head around this issue even after researching various scenarios online. Here's what's going on: I have an array of strings named recipientsList. What I want to do is make an AJAX call for each s ...

What is the process for adding extra CSS to a webpage displayed in WebView2?

Currently, I am utilizing the Webview2 control within a winform application. My goal is to enhance the behavior of the loaded page by injecting additional CSS code when a specific URL is being displayed in the browser control. Specifically, I aim to implem ...

Encountered an error of 'npm ERR! invalid semver' when attempting to release an npm package

npm ERR! code EBADSEMVER npm ERR! invalid semver: npm ERR! Check out the full log of this run here: I attempted to reinstall node and semver, but unfortunately it did not resolve the issue. ...

Steps to include a personalized function in a Mongoose Model

One way to extend Mongoose is by adding methods to documents. Here's an example: const userSchema = new mongoose.Schema({ balance: Number }) userSchema.methods.withdrawBalance = function(amount){ const doc = this doc.balance = doc.balance - amou ...

Having trouble with updating label text in MUIDataTable in ReactJS?

Looking to implement multi-language support in MUI Datatables. I have been able to modify the translations, but when attempting to change languages by providing a different object with new translations (verified using console log), the label texts do not u ...

What is the correct syntax for declaring a variable within a switch statement in TypeScript?

How can I properly use a switch statement in TypeScript to assign a new variable a value? For example: let name: string switch(index) { case 0: name = "cat" case 1: name = "dog" .... } I keep getting the err ...

obtain information from a Java servlet on a web page

I am working on a webpage that displays various coordinates (longitude, latitude), and I need to create a Java class to sort these coordinates. My plan is to send the coordinates to a Java servlet before displaying them on the webpage. The servlet will th ...

Encountering an error when trying to access a property of an undefined MVC model in a

Embarked on a journey to learn web service development, only to encounter a roadblock. I'm struggling to figure out how to utilize ExpressJS Router() to pass POST data to the controller files. Upon inspecting the request redirected from product.route. ...

Using TypeScript: Implementing array mapping with an ES6 Map

If I have an array of key-value objects like this: const data = [ {key: "object1", value: "data1"}, {key: "object2", value: "data2"}, {key: "object3", value: "data3"}, ] const mappedData = data.map(x => [x.key, x.value]); const ES6Map = n ...

What is the best way to create a sleek typewriter effect transition by hovering between tabs?

When hovering over a tab, the content in the main content area's child div should be displayed from a sibling div that holds the content. Initially, the details div style is set to hide the contents but upon hover, it is displayed. The described func ...

Having trouble populating Extjs Grid with JSON data

In this simple grid, I am attempting to display three columns - Subject ID, Subject Name, and Subject Short Name by obtaining JSON data. The data is stored in a variable called myData in JSON format, which has been received from the server. Despite pasting ...

Tips for representing entire months as object keys using numerical values

Currently, I find myself a bit puzzled as to why my code is not functioning as expected, and I am hopeful that you all could assist me in solving this issue. The data structure I am working with consists of years and corresponding months. chosenMonths = { ...

The autofocus feature does not function properly in an input tag that is not located within a form element

Is there a way to set the autofocus property in an input element that is not part of a form? I have tried adding the "autofocus" attribute to the input tag but it doesn't seem to be working. <div> //I have added the autofocus property her ...

Incorporating Button Value from Anchor Tag Title Upon Page Load

Currently, I am working on a real estate project and facing an issue with a contact modal box. My goal is to extract the title from tag "a" and place it as the button value in the modal box. English isn't my strong suit, so please excuse any errors i ...

Tips for deleting default text from MUI Autocomplete and TextField on click

I am currently using Material-UI (MUI) Autocomplete feature with a TextField element, and I have a specific behavior that I would like to achieve. Currently, when I click on the search bar, the placeholder text moves to the top of the TextField. However, m ...

React-hook-form does not display the input length in a custom React component

Introducing a custom Textarea component designed for reusability, this basic textarea includes a maxlength prop allowing users to set the maximum input length. It also displays the current input length in the format current input length/max length. While ...

Combining Ajax Form with Django to handle and display errors in form submissions

I am attempting to save information from a form into my Database using Django and Python for the backend. Below is the HTML form: <form> <center> <div class="container-fluid"> <div class="row"> <div clas ...

The collapse feature in react-bootstrap is malfunctioning

I've been experimenting with the Collapse feature from react-bootstrap in order to implement a collapsible table row. The goal is to have table rows that expand and collapse when clicked, revealing more information specific to that row. While it see ...