aico-image-editor/src/components/canvasFilter/canvasFilter.html

Combine multiple image into and create single combined image

<div  x-data="canvasFilter">
    <div class="col-12">
        <div x-show="$store.canvas.isWebglSupported">
            <div class="form-check form-switch form-check-inline">
                <input class="form-check-input" type="checkbox" value="" id="enable-webgl-mode" name="enable-webgl-mode" x-model="isWebglBackendEnabled"
                    @change="$store.canvas.swapFilterBackend(isWebglBackendEnabled)" x-init="isWebglBackendEnabled = $store.canvas.isWebglSupported"  />
                <label class="form-check-label" for="enable-webgl-mode" x-text="getTranslatedHTML('enableWebglMode')"></label>
            </div>
            <div class="mt-2">
                <small class="text-warning" x-show="showWebglNotice" x-text="getTranslatedHTML('webglTextureSizeNotice')"></small>
            </div>
        </div>
    </div>
    <div class="row mt-0 justify-content-between gx-4 gy-4" 
        :class="isCanvasBrightnessContrastEnabled ? '' : $store.canvas.isObjectFilterControlsDisabled  ? 'inactiveblock': ''"
        x-bind="canvasBrightnessContrastTrigger">
        <div class="col-12">
            <div class="form-check form-switch form-check-inline" x-show="!isCanvasBrightnessContrastEnabled">
                <input class="form-check-input" type="checkbox" value="" id="object-grayscale-check" name="object-grayscale-check" x-model="isObjectGrayScaleFilterActive"
                    @change="updateObjectGrayScale()" @update-grayscale-switch-value.window="() => {
                        isObjectGrayScaleFilterActive =  !!$event.detail.grayscale
                    }">
                <label class="form-check-label" for="object-grayscale-check" x-text="getTranslatedHTML('blackAndWhite')"></label>
            </div>
            <div class="form-check form-switch form-check-inline" x-show="isCanvasBrightnessContrastEnabled">
                <input class="form-check-input" type="checkbox" value="" id="canvas-grayscale-check" name="canvas-grayscale-check" x-model="isCanvasGrayScaleFilterActive"
                    @change="updateCanvasGrayScale()" />
                <label class="form-check-label" for="canvas-grayscale-check" x-text="getTranslatedHTML('blackAndWhite')"></label>
            </div>
        </div>
        <div class="col">
            <div class="d-flex align-items-center mb-2">
                <h6 class="mb-0 text-uppercase" x-text="getTranslatedHTML('brightnesstitle')"></h6>
                <span class="linedesign ms-3 me-0"></span>
            </div> 
            <div class="gx-2 flex-nowrap">
                <div class="custom-range-slider" x-show="!isCanvasBrightnessContrastEnabled">
                    <input class="w-100 custom-range-slider__control" type="range" id="objectBrightnessSlider" min="-100" max="100" x-model="objectBrightness" @change="updateObjectBrightness()" 
                    :title="objectBrightness" @update-brightness-slider-value.window="() => {
                        objectBrightness = $event.detail.brightness * 100
                    }"/>
                    <span class="custom-range-slider__bubble" x-text="objectBrightness" :style="{left: setBubblePosition(objectBrightness, -100, 100)}"></span>
                </div>
                <div class="custom-range-slider" x-show="isCanvasBrightnessContrastEnabled">
                    <input class="w-100 custom-range-slider__control" type="range" id="canvasBrightnessSlider" min="-100" max="100" x-model="canvasBrightness" @change="updateCanvasBrightness(canvasBrightness/100)" 
                        :title="canvasBrightness" />
                    <span class="custom-range-slider__bubble" x-text="canvasBrightness" :style="{left: setBubblePosition(canvasBrightness, -100, 100)}"></span>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="d-flex align-items-center mb-2">
                <h6 class="mb-0 text-uppercase" x-text="getTranslatedHTML('contrasttitle')"></h6>
                <span class="linedesign ms-3 me-0"></span>
            </div>
            
            <div class="gx-2 flex-nowrap">
                <div class="custom-range-slider" x-show="!isCanvasBrightnessContrastEnabled">
                    <input class="w-100 custom-range-slider__control" type="range" id="objectContrastSlider" min="-100" max="100" x-model="objectContrast" @change="updateObjectContrast()" 
                        :title="objectContrast" @update-contrast-slider-value.window="() => {
                            objectContrast = $event.detail.contrast * 100
                        }"/>
                    <span class="custom-range-slider__bubble" x-text="objectContrast" :style="{left: setBubblePosition(objectContrast, -100, 100)}"></span>
                </div>
                <div class="custom-range-slider" x-show="isCanvasBrightnessContrastEnabled">
                    <input class="w-100 custom-range-slider__control" type="range" id="canvasContrastSlider" min="-100" max="100" x-model="canvasContrast" @change="updateCanvasContrast(canvasContrast/100)" 
                        :title="canvasContrast">
                    <span class="custom-range-slider__bubble" x-text="canvasContrast" :style="{left: setBubblePosition(canvasContrast, -100, 100)}"></span>
                </div>
            </div>   
        </div>
    </div>
    <div class="row mt-4">
        <div class="form-check-inline">
            <input class="form-check-input" type="checkbox" id="enableCanvasLevel" x-model="isCanvasBrightnessContrastEnabled"  />
            <label class="form-check-label" for="enableCanvasLevel" x-text="getTranslatedHTML('enableCanvasBrightnessContrastTitle')"></label>
        </div>
    </div>
</div>