Adding chroma subsampling for mozjpeg

codecs/mozjpeg_enc/README.md

@@ -39,5 +39,6 @@ struct MozJpegOptions {
   bool trellis_opt_zero;
   bool trellis_opt_table;
   int trellis_loops;
+  int chroma_subsample;
 };
 ```

codecs/mozjpeg_enc/example.html

@@ -33,6 +33,7 @@
       trellis_opt_zero: true,
       trellis_opt_table: true,
       trellis_loops: 1,
+      chroma_subsample: 0,
     });
 
     const blob = new Blob([result], {type: 'image/jpeg'});

codecs/mozjpeg_enc/mozjpeg_enc.cpp

@@ -29,6 +29,7 @@ struct MozJpegOptions {
   bool trellis_opt_zero;
   bool trellis_opt_table;
   int trellis_loops;
+  int chroma_subsample;
 };
 
 int version() {
@@ -119,9 +120,6 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
    */
   jpeg_set_defaults(&cinfo);
 
-  /* Now you can set any non-default parameters you wish to.
-   * Here we just illustrate the use of quality (quantization table) scaling:
-   */
   jpeg_set_colorspace(&cinfo, (J_COLOR_SPACE) opts.color_space);
 
   if (opts.quant_table != -1) {
@@ -147,6 +145,11 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
 
   set_quality_ratings(&cinfo, (char*) pqual, opts.baseline);
 
+  if (opts.chroma_subsample && opts.color_space == JCS_YCbCr) {
+    cinfo.comp_info[0].h_samp_factor = opts.chroma_subsample;
+    cinfo.comp_info[0].v_samp_factor = opts.chroma_subsample;
+  }
+
   if (!opts.baseline && opts.progressive) {
     jpeg_simple_progression(&cinfo);
   } else {
@@ -209,6 +212,7 @@ EMSCRIPTEN_BINDINGS(my_module) {
     .field("trellis_opt_zero", &MozJpegOptions::trellis_opt_zero)
     .field("trellis_opt_table", &MozJpegOptions::trellis_opt_table)
     .field("trellis_loops", &MozJpegOptions::trellis_loops)
+    .field("chroma_subsample", &MozJpegOptions::chroma_subsample)
     ;
 
   function("version", &version);

src/codecs/mozjpeg/encoder-meta.ts

@@ -17,6 +17,7 @@ export interface EncodeOptions {
   trellis_opt_zero: boolean;
   trellis_opt_table: boolean;
   trellis_loops: number;
+  chroma_subsample: number;
 }
 
 export interface EncoderState { type: typeof type; options: EncodeOptions; }
@@ -38,4 +39,5 @@ export const defaultOptions: EncodeOptions = {
   trellis_opt_zero: false,
   trellis_opt_table: false,
   trellis_loops: 1,
+  chroma_subsample: 0,
 };

src/codecs/mozjpeg/options.tsx

@@ -45,6 +45,10 @@ export default class MozJPEGEncoderOptions extends Component<Props, State> {
       color_space: inputFieldValueAsNumber(form.color_space, options.color_space),
       quant_table: inputFieldValueAsNumber(form.quant_table, options.quant_table),
       trellis_loops: inputFieldValueAsNumber(form.trellis_loops, options.trellis_loops),
+      // Other:
+      chroma_subsample: (!form.auto_chroma_subsample) ? options.chroma_subsample :
+        form.auto_chroma_subsample.checked ? 0 :
+        inputFieldValueAsNumber(form.chroma_subsample, 2),
     };
     this.props.onChange(newOptions);
   }
@@ -131,6 +135,35 @@ export default class MozJPEGEncoderOptions extends Component<Props, State> {
                   <option value={MozJpegColorSpace.YCbCr}>YCbCr</option>
                 </Select>
               </label>
+              <Expander>
+                {options.color_space === MozJpegColorSpace.YCbCr ?
+                  <label class={style.optionInputFirst}>
+                    <Checkbox
+                      name="auto_chroma_subsample"
+                      checked={options.chroma_subsample === 0}
+                      onChange={this.onChange}
+                    />
+                    Auto subsample chroma
+                  </label>
+                  : null
+                }
+              </Expander>
+              <Expander>
+                {options.chroma_subsample !== 0 ?
+                  <div class={style.optionOneCell}>
+                    <Range
+                      name="chroma_subsample"
+                      min="1"
+                      max="4"
+                      value={options.chroma_subsample}
+                      onInput={this.onChange}
+                    >
+                      Subsample chroma by:
+                    </Range>
+                  </div>
+                  : null
+                }
+              </Expander>
               <label class={style.optionTextFirst}>
                 Quantization:
                 <Select