feat: add convertTypes option to configure converting mime types

fix #123

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## next
 
+- Add a new option: `convertTypes` (#123).
 - Ignore the `strict` option when the `maxWidth/Height` option is set and its value is less than the natural width/height of the image (#134).
 .
 

README.md

@@ -206,12 +206,22 @@ The quality of the output image. It must be a number between `0` and `1`. If thi
 
 The mime type of the output image. By default, the original mime type of the source image file will be used.
 
+### convertTypes
+
+- Type: `Array` or `string` (multiple types should be separated by commas)
+- Default: `['image/png']`
+- Examples:
+  - `['image/png', 'image/webp']`
+  - `'image/png,image/webp'`
+
+Files whose file type is included in this list, and whose file size exceeds the `convertSize` value will be converted to JPEGs.
+
 ### convertSize
 
 - Type: `number`
 - Default: `5000000` (5 MB)
 
-PNG files over this value will be converted to JPEGs. To disable this, just set the value to `Infinity`.
+Files whose file type is included in the `convertTypes` list, and whose file size exceeds this value will be converted to JPEGs. To disable this, just set the value to `Infinity`.
 
 **Examples**:
 

docs/index.html

@@ -149,6 +149,12 @@ <h4 class="card-header">Options</h4>
                   <input type="text" name="mimeType" class="form-control" id="inputMimeType" placeholder="auto" v-model.number="options.mimeType">
                 </div>
               </div>
+              <div class="form-group row">
+                <label for="inputConvertTypes" class="col-5 col-form-label">convertTypes</label>
+                <div class="col-7">
+                  <input type="text" name="convertTypes" class="form-control" id="inputConvertTypes" placeholder="image/png" v-model="options.convertTypes">
+                </div>
+              </div>
               <div class="form-group row mb-0">
                 <label for="inputConvertSize" class="col-5 col-form-label">convertSize</label>
                 <div class="col-7">

docs/js/main.js

@@ -24,6 +24,7 @@ window.addEventListener('DOMContentLoaded', function () {
           height: undefined,
           quality: 0.8,
           mimeType: '',
+          convertTypes: 'image/png',
           convertSize: 5000000,
           success: function (result) {
             console.log('Output: ', result);

src/defaults.js

@@ -68,7 +68,14 @@ export default {
   mimeType: 'auto',
 
   /**
-   * PNG files over this value (5 MB by default) will be converted to JPEGs.
+   * Files whose file type is included in this list,
+   * and whose file size exceeds the `convertSize` value will be converted to JPEGs.
+   * @type {string｜Array}
+   */
+  convertTypes: ['image/png'],
+
+  /**
+   * PNG files over this size (5 MB by default) will be converted to JPEGs.
    * To disable this, just set the value to `Infinity`.
    * @type {number}
    */

src/index.js

@@ -221,7 +221,7 @@ export default class Compressor {
     let fillStyle = 'transparent';
 
     // Converts PNG files over the `convertSize` to JPEGs.
-    if (file.size > options.convertSize && options.mimeType === 'image/png') {
+    if (file.size > options.convertSize && options.convertTypes.indexOf(options.mimeType) >= 0) {
       fillStyle = '#fff';
       options.mimeType = 'image/jpeg';
     }

test/specs/options/convertTypes.spec.js

@@ -0,0 +1,32 @@
+describe('convertTypes', () => {
+  it('should convert the image from PNG to JPEG', (done) => {
+    window.loadImageAsBlob('/base/docs/images/picture.png', (image) => {
+      const compressor = new Compressor(image, {
+        convertSize: 0,
+        success(result) {
+          expect(image.type).to.equal('image/png');
+          expect(result.type).to.equal('image/jpeg');
+          done();
+        },
+      });
+
+      expect(compressor.options.convertTypes).to.deep.equal(['image/png']);
+    });
+  });
+
+  it('should not convert the image from PNG to JPEG', (done) => {
+    window.loadImageAsBlob('/base/docs/images/picture.png', (image) => {
+      const compressor = new Compressor(image, {
+        convertTypes: [],
+        convertSize: 0,
+        success(result) {
+          expect(image.type).to.equal('image/png');
+          expect(result.type).to.equal('image/png');
+          done();
+        },
+      });
+
+      expect(compressor.options.convertTypes).to.deep.equal([]);
+    });
+  });
+});

types/index.d.ts

@@ -10,6 +10,7 @@ declare namespace Compressor {
     height?: number;
     quality?: number;
     mimeType?: string;
+    convertTypes?: string | string[];
     convertSize?: number;
     beforeDraw?(context: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void;
     drew?(context: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void;