Transformation UI Customization

.uploaded-img{
  width:300px;
  height:auto
}

Copied!

const apiKey = "YOUR_API_KEY";
const tr = new FilestackTransform(apiKey);

//Customize Transformation UI
tr.setConfig({
    editor: {

      transforms: {
        lockRotation: false,
      },

      filters: {
        // enabled: true - enable all adjustments or false to disable this module
        enabled: [
          'blackWhite',
          'brownie',
          'autumn',
          'milkyWay',
        ],

      },
      adjustments: {
        enabled: ['brightness', 'gamma', 'saturation', 'contrast', 'hue', 'noise', 'blur', 'pixelate'],
        // enabled: true - enable all adjustments or false to disable this module
      },
    },
    output: {
      format: 'png',
      quality: 1,
      blob: false, // export file as blob or url
      name: null, // output file name if null name will be extracted from url or file element
    },
  });

// apply listener with Transformations UI on input file change
document.querySelector('#demoFile').addEventListener('change', (res) => {
  tr.open(res.target.files[0]).then(res => {
    document.getElementById('result').src = res;
	  storeImg(res);

  });
});

function storeImg(res){
 console.log(res);
}

Copied!