Any Image Compressor

Introduction

Compress any images choosing width and height and quality or convert from jpg to png

How To Setup

The plugin has 3 elements. The uploader and compressed image are required, and preview is optional.

Place an uploader element on the page

Place an Compressed Image element on the page

Configure File Transfer from Uplader to Compressed Image

Workflow for transfering files from uploader
Workflow to compress images

Now in Compressed Image element you have compressed images

Plugin fields, events, states, actions.

Uploader

Element for uploading files for compressing.

This item has many fields to customize its appearance. Most of them are displayed in the preview.

Fields

content - inner text of input element

Borders - show element borders

Turn off borders

Borders Width - width of borders in pixels

Border Color - color of borders

Border Radius - roundness of corners

Background Color - background color of element

Change background color

States

files - Return array with base64 strings of uploaded images

compressed - Return array with base64 strings of compressed images

names - Return array with names of uploaded files

sizes - Return array with sizes of uploaded files

Actions

get files - Get files from input and generate base64 strings of this

Compressed Image

Element for compress images and show them.

Fields

List of Base64 images - Array of base64 strings

URL - URL to image page

Borders - show element borders

Borders Width - width of borders in pixels

Border Color - color of borders

Border Radius - roundness of corners

Background Color - background color of element

Show Image Border - Change visibility of borders around each image

Image Border Color - Color of border around each image

Image Border Width - Width of border around each image

Image Border Radius - Border roudness of each image

Image Border Example
Image Border Settings

States

compressed - Array of base64 strings

compressed_from_url - Array of base64 strings ( in array is only one element )

Actions

compress - Compress images from uploader

convert - Convert image from uploader

compress_from_url - Compress image from url

Draw Images - Show compressed images in the element

Preview

Optional element to show uploaded images.

Fields

Images - Array of base64 strings

Borders - show element borders

Borders Width - width of borders in pixels

Border Color - color of borders

Border Radius - roundness of corners

Background Color - background color of element

Show Image Border - Change visibility of borders around each image

Image Border Color - Color of border around each image

Image Border Width - Width of border around each image

Image Border Radius - Border roudness of each image

Image Border Example
Image Border Settings

States

URL in array - Return url in array

Actions

link to array - Add link in array

Demo to preview the settings:

Last updated

Was this helpful?