How to use @ephox/imagetools - 10 common examples

const blobManipulate = (anyInSystem: AlloyComponent, blob: Blob, filter: (ir: ImageResult) => ImageResult | PromiseLike, action: (blob: Blob) => string, swap: () => void): Promise> => {
    block(anyInSystem);
    return ResultConversions.blobToImageResult(blob).
      then(filter).
      then(imageResultToBlob).
      then(action).
      then((url) => {
        return updateSrc(anyInSystem, url).then((oImg) => {
          updateButtonUndoStates(anyInSystem);
          swap();
          unblock(anyInSystem);
          return oImg;
        });
      }).catch((err) => {
      // tslint:disable-next-line:no-console
        console.log(err); // TODO: Notify the user?
        unblock(anyInSystem);
        return err;
      });

});
  };

  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 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);

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);

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

const makeResizeTransform = (width: number, height: number): ((ir: ImageResult) => Promise) => (ir: ImageResult): Promise => {
    return ImageTransformations.resize(ir, width, height);
  };

return new Promise(function (resolve) {
    BlobConversions.blobToImage(blob).
      then(function (newImage) {
        const newSize = ImageSize.getNaturalImageSize(newImage);

        if (originalSize.w !== newSize.w || originalSize.h !== newSize.h) {
          if (ImageSize.getImageSize(img)) {
            ImageSize.setImageSize(img, newSize);
          }
        }

        URL.revokeObjectURL(newImage.src);
        return blob;
      }).
      then(ResultConversions.blobToImageResult).
      then(function (imageResult) {
        return updateSelectedImage(editor, imageResult, true, imageUploadTimerState, img);
      }, function () {

const defaultFetchImage = (editor: Editor, img: HTMLImageElement) => {
  let src = img.src, apiKey;

  if (isCorsImage(editor, img)) {
    return Proxy.getUrl(img.src, null, isCorsWithCredentialsImage(editor, img));
  }

  if (!isLocalImage(editor, img)) {
    src = Settings.getProxyUrl(editor);
    src += (src.indexOf('?') === -1 ? '?' : '&') + 'url=' + encodeURIComponent(img.src);
    apiKey = Settings.getApiKey(editor);
    return Proxy.getUrl(src, apiKey, false);
  }

  return BlobConversions.imageToBlob(img);
};

const makeCropTransform = (): ((ir: ImageResult) => Promise) => (ir: ImageResult): Promise => {
    const rect = imagePanel.getRect();
    return ImageTransformations.crop(ir, rect.x, rect.y, rect.w, rect.h);
  };

return selectedImageOperation(editor, imageUploadTimerState, function (imageResult) {
      return ImageTransformations.flip(imageResult, axis);
    })();
  };