Reducing image file sizes in Ionic 3

I have been struggling to compress an image client-side using Ionic 3 for the past couple of days. I have experimented with:

ng2-img-max - encountered an error when utilizing the blue-imp-canvas-to-blob canvas.toBlob() method (which is a dependency of ng2-img-max). It only provided me with information about the line where the error occurred. I believe that creating an HTMLCanvasElement in Ionic is not feasible due to some complications with webworkers.

Ahdin - JS library
JIC - JS library
TinyJPG - npm module

All these options presented different errors, and after investigating further, I realized that it was because the libraries/modules were not compatible with Ionic 3. In many cases, the issue seemed to be related to the HTMLCanvasElement.

I also attempted the solution mentioned in this post - however, adjusting the quality variable did not affect the image size.

Has anyone managed to successfully compress images client-side using Ionic 3? If so, how did you accomplish this?

javascriptimagetypescriptionic-frameworkcompression

Answer №1

Consider using the CameraOptions in conjunction with the camera plugin.

const options: CameraOptions = {
        quality: 20,
        targetWidth: 600,
        targetHeight: 600,
        destinationType: this.camera.DestinationType.DATA_URL,
        encodingType: this.camera.EncodingType.PNG,
        mediaType: this.camera.MediaType.PICTURE,
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: true // please note that this may not work on all devices
}

Answer №2

I've recently started using ngx-image-compress

import { NgxImageCompressService } from "ngx-image-compress";

constructor(public imageCompress: NgxImageCompressService) { }

private reduceFileSize() {
      this.imageCompress.compressFile(data, '', 50, 50).then(result => {
         this.updatedImageData = result;
      })
}

Experiment with the settings, or create a loop for compressing images to achieve your desired outcome :)

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

Struggling to comprehend certain sections of code within AngularJS

I have been working through an AngularJS book to learn, but I am struggling with some code that is not well explained. The selectCategory() function is included in the ng-click directive like this: <a ng-click="selectCategory()">Home</a> < ...

javascriptangularjs

Identifying the HTML elements beneath the mouse pointer

Does anyone know the method to retrieve the HTML tag located directly under the mouse cursor on a webpage? I am currently developing a new WYSIWYG editor and would like to incorporate genuine drag and drop functionalities (rather than the common insert at ...

javascripthtml

Can you identify the TypeScript type for an array containing various Angular components?

In my application, I have a diverse range of components that I would like to organize into an array. There are no restrictions on what types of components can be included in this array, as long as they are Angular components. What is the correct way to de ...

angulartypescript

Error: Undefined Function [Thinkster.io's Angular Tutorial Chapter 4]

Currently working on the Angular Tutorial provided by Thinkster.io and enjoying every bit of it. However, I've hit a roadblock in Chapter 4 that seems impossible to overcome. Whenever I attempt to execute a Post or Delete action, I encounter the follo ...

javascriptangularjsyeoman

Incorrect ng-pattern does not enable the tooltip to be activated

I have implemented the ng-pattern="/^[0-9]{9}$/" in an input field that appears as follows: <input type="text" id="company_taxId" ng-model="company.taxId" required="required" class="input ng-scope ng-valid-maxlength ng-valid-mi ...

javascriptangularjstwitter-bootstrap

The filter() function seems to be failing to produce any results even though the callbackFn is functioning properly

I've created a function to filter certain JSON elements in an array using Vue 3. Here is the data structure: [ { "UID_Person": "160a5b9e-c352-39e3-802b-9cfcc126da77", "FirstName": "Maxi", ...

javascriptvue.jsfiltervuejs3

Why is AJAX failing to execute PHP file from JavaScript?

The Issue: Hello, I have confirmed that my PHP file is functioning properly. However, the AJAX code connected to my JavaScript function seems to be malfunctioning. Even though the function is triggered, nothing happens as expected. The Script: Check o ...

javascriptphpjqueryajaxhtml

Choosing between exclusive choices across multiple selection elements in Vue 3

In my Vue component, there are 5 distinct values stored in the options variable. I want users to select only one value from each of the 5 select options I provide. This means that once a user selects a value in one input select component, that same value c ...

javascriptarraysvue.jsvuejs3vue-composition-api

A guide on extracting a URL from source tags using Cheerio/jQuery

I have been struggling to retrieve the first image with data-srcset attribute ("https://sample.img_1") using Cheerio. None of my previous attempts have been successful. My most recent attempt looks like this: $(".sample_picture [media='(max-width: 64 ...

javascriptjquerycss-selectorscheerio

Using the SmartSheets API to Iterate Over a List to Determine the Variable of a Function

I have a group of numerical values listed below that are stored in a variable. [700000000084, 100000000051652, 8800000000000072, 280000000000004, 680000000000008, 880000000000006] My goal is to iterate through this list using the SmartSheets API to gathe ...

javascriptnode.jssmartsheet-api

Issues with image loading in Next JS and Cloudinary

I'm currently delving into the world of Next JS and attempting to convert my app into a static site. In doing so, I've opted to utilize Cloudinary for image processing; however, I'm encountering issues with the images not displaying. Next JS ...

javascriptnext.jscloudinary

Incorporating a class into ever-changing Bootstrap Table rows

Looking to enhance my table rows with a class, excluding the header. Struggling to find a way to do this. Any ideas? This is the table in question: <table id="table" class="hidden table table-bordered table-striped table-hover"> <thead> ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Before proceeding to update in Angular 8, ensure the repository is not dirty. Commit or stash any changes that have been

Encountered an Issue The repository is not clean. Please commit or stash any changes before updating. When upgrading from version 7 to Angular 8, I faced this error. To find out more about the upgrade process, you can visit the Angular Guide for Upgra ...

angulartypescriptgitangular-cliangular8

Modifying array elements in JavaScript without explicit instructions

I am relatively new to Javascript and seem to be encountering a rather puzzling issue that I'm unable to resolve. Currently, I have two classes: Country and PPM_Data. The Country class contains parameters such as name, area, ppm, etc., along with a f ...

javascriptarraysreactjsjavascript-objects

Encountered a 404 error (not found) while making a GET request with axios

I encountered an issue with my pizza shop application built with Next.js. Whenever I run the app on my computer, I come across this error: https://i.sstatic.net/tsQzZ.png The error disappears after refreshing the page. Here is my index.js file: import ax ...

javascriptreactjsnext.jsaxiosvercel

What is the best way to dynamically update or display unique CSS styles when a service is invoked or provides a response in AngularJS using JavaScript

Seeking to display a unique CSS style on my HTML FORM prior to invoking a service in my code and then reverting back after receiving the response. I have implemented the use of ng-class to dynamically add the class when the boolean activeload1 is set to tr ...

javascripthtmlcssangularjs

Creating a Unique Carousel Design with Ant Design

https://i.sstatic.net/HobMm.jpg Steps to personalize the ant design carousel with these unique features: Use Bullets instead of Boxes Modify Bullet Color Place Bullets outside the image container Sandbox Link https://codesandbox.io/s/trusting-dream-zzjr ...

javascripthtmlreactjscarouselantd

Animated drop-down menu in Angular 4

I recently came across this design on web.whatsapp.com https://i.stack.imgur.com/ZnhtR.png Are there any Angular packages available to achieve a dropdown menu with the same appearance? If not, how can I create it using CSS? ...

angulartypescriptnpmdrop-down-menu

Maintain the state of various panels on page load with the Bootstrap Accordion feature

I have implemented a Bootstrap accordion on my form page which allows users to open multiple panels simultaneously. Upon submitting the form, I want to preserve the state of any open Bootstrap accordion panels. To achieve this, I utilized code from stack ...

javascriptjqueryjsontwitter-bootstrapaccordion

What is the method for configuring automatic text color in CKEditor?

Is there a way to change the default text color of CKEditor from #333333 to #000000? I have attempted to modify the contents.css in the plugin folder: body { /* Font */ font-family: sans-serif, Arial, Verdana, "Trebuchet MS"; font-size: 12px; ...

javascripthtmlcssckeditoreditor