How to use the @ephox/imagetools.ImageTransformations.gamma function in @ephox/imagetools

To help you get started, we’ve selected a few @ephox/imagetools examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github tinymce / tinymce / modules / tinymce / src / themes / silver / main / ts / ui / dialog / imagetools / EditPanel.ts View on Github external
const filterPanelComponents = [
    createBackButton(),
    createSpacer(),
    createApplyButton()
  ];

  // Invert, Sharpen, Emboss
  const FilterPanel = Container.sketch({
    dom: panelDom,
    components: filterPanelComponents.map((mem) => mem.asSpec())
  });

  const BrightnessPanel = createVariableFilterPanel('Brightness', ImageTransformations.brightness, -100, 0, 100);
  const ContrastPanel = createVariableFilterPanel('Contrast', ImageTransformations.contrast, -100, 0, 100);
  const GammaPanel = createVariableFilterPanel('Gamma', ImageTransformations.gamma, -100, 0, 100);

  const makeColorTransform = (red: number, green: number, blue: number): ((ir: ImageResult) => Promise) => (ir: ImageResult): Promise => ImageTransformations.colorize(ir, red, green, blue);

  const makeColorSlider = (label: string) => {
    const onChoose = (slider: AlloyComponent, thumb: AlloyComponent, value: SliderTypes.SliderValueX): void => {
      const redOpt = memRed.getOpt(slider);
      const blueOpt = memBlue.getOpt(slider);
      const greenOpt = memGreen.getOpt(slider);
      redOpt.each((red) => {
        blueOpt.each((blue) => {
          greenOpt.each((green) => {
            const r = Representing.getValue(red).x() / 100;
            const g = Representing.getValue(green).x() / 100;
            const b = Representing.getValue(blue).x() / 100;
            const transform = makeColorTransform(r, g, b);
            emitTransform(slider, transform);