Please download the JS compression plugin first . After downloading dist, find image-compress.min.jsthe file in the directory and scriptimport :

<script src="../dist/image-compressor.js"></script>

Simple to use

You can only pass in the image object to be compressed, other parameters are optional, the plugin automatically completes the image compression process according to the default parameters. However, the compressed image output in this way meets the following characteristics:

• By default, it is configured according to the 0.8compression ratio;

• The width/height of the output image maintains the width/height of the source image;

• Generally, the output image format keeps the source image format;

• When the pngpicture 's sizeis greater than 2m, it will be converted to jpegformat picture by default;

• Fill the pngimage with a transparent color;

• When the output image sizeis larger than the source image, the source image is returned as the output image;

• jpegFormat image, correct flip/rotation direction;

If these default configurations do not meet your needs, other parameter configurations may be required. The following is a simple configuration to use:

var options = {
   file: file,

   // callback before compression
   beforeCompress: function (result) {
     console.log('Image size before compression: ', result.size);
     console.log('mime type: ', result.type);
   },

   // compression success callback
   success: function (result) {
     console.log('result: ', result)
     console.log('Image size after compression: ', result.size);
     console.log('mime type: ', result.type);
     console.log('Actual compression ratio: ', ((file.size - result.size) / file.size * 100).toFixed(2) + '%');
   }
};

new ImageCompressor(options);

Among them, the hook function beforeCompressoccurs after the image is read and before the canvas is created; the hook successfunction occurs after the compression is completed to generate the image. Their callback parameters resultare blobobjects that integrate relevant information such as size, image type, and size.

Standard use

In standard use, we can customize the configuration compression ratio ( quality), output image type ( mimeType), width ( width), height ( height), maximum width ( maxWidth), maximum height ( maxHeight), minimum width ( minWidth), maximum height ( minHeight), png to jpeg threshold ( convertSize), whether to correct jpeg direction ( redressOrientation) and whether to relax mode ( loose).

• Whether to correct the jpeg orientation ( redressOrientation), the jpegformat image will render the image according to its orientation in some iOS browsers. This option can control the restoration of the original orientation. The default is true;

• Whether the loose mode ( loose), means to control when the compressed image sizeis larger than source image, the source image is output, otherwise the compressed image is output, the default is true.

Here is the standard configuration:

var options = {
   file: file,
   quality: 0.6,
   mimeType: 'image/jpeg',
   maxWidth: 2000,
   maxHeight: 2000,
   width: 1000,
   height: 1000,
   minWidth: 500,
   minHeight: 500,
   convertSize: Infinity,
   loose: true,
   redressOrientation: true,

   // callback before compression
   beforeCompress: function (result) {
     console.log('Image size before compression: ', result.size);
     console.log('mime type: ', result.type);
   },

   // compression success callback
   success: function (result) {
     console.log('Image size after compression: ', result.size);
     console.log('mime type: ', result.type);
     console.log('Actual compression ratio: ', ((file.size - result.size) / file.size * 100).toFixed(2) + '%');
   },

   // An error occurred
   error: function (msg) {
     console.error(msg);
   }
};

new ImageCompressor(options);

errorThe hook function is the error callback during the image compression process, without this callback error will be thrown in the throw new Error(msg)form .

other hook functions

Before compressing the output image, we can also do some custom processing on the canvas to incorporate elements.

The following is grayscale and watermarking of the image:

var options = {
   file: file,

   // Before picture painting
   beforeDraw: function (ctx) {
     vm.btnText = 'Ready to draw...';
     console.log('Ready to draw...');
     ctx.filter = 'grayscale(100%)';
   },

   // After the picture is painted
   afterDraw: function (ctx, canvas) {
     vm.btnText = 'Drawing done...';
     console.log('Drawing completed...');
     ctx.fillStyle = '#fff';
     ctx.font = (canvas.width * 0.1) + 'px microsoft yahei';
     ctx.fillText(vm.watermarkText, 10, canvas.height - 20);
   },
};

new ImageCompressor(options);

beforeDrawIt is the hook function before the picture is painted after the canvas is created, and the hook function after the picture afterDrawis painted.

Utility function

The following figure summarizes the detailed process of the js-image-compressorplugin from uploading the user input's image filelocally to compressing the image, and exposes these tools and methods for users to use.