PHP Classes

File: toastui/examples/js/service-basic.js

Recommend this page to a friend!
  Classes of Mark de Leon   PHP Document Scanner using SANE or eSCL AirPrint   toastui/examples/js/service-basic.js   Download  
File: toastui/examples/js/service-basic.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Document Scanner using SANE or eSCL AirPrint
Web interface to scan printed documents
Author: By
Last change:
Date: 4 years ago
Size: 26,001 bytes
 

Contents

Class file image Download
/** * basic.js * @author NHN Ent. FE Development Team <dl_javascript@nhn.com> * @fileoverview */ const supportingFileAPI = !!(window.File && window.FileList && window.FileReader); const rImageType = /data:(image\/.+);base64,/; const shapeOptions = {}; let shapeType; let activeObjectId; // Buttons const $btns = $('.menu-item'); const $btnsActivatable = $btns.filter('.activatable'); const $inputImage = $('#input-image-file'); const $btnDownload = $('#btn-download'); const $btnUndo = $('#btn-undo'); const $btnRedo = $('#btn-redo'); const $btnClearObjects = $('#btn-clear-objects'); const $btnRemoveActiveObject = $('#btn-remove-active-object'); const $btnCrop = $('#btn-crop'); const $btnFlip = $('#btn-flip'); const $btnRotation = $('#btn-rotation'); const $btnDrawLine = $('#btn-draw-line'); const $btnDrawShape = $('#btn-draw-shape'); const $btnApplyCrop = $('#btn-apply-crop'); const $btnCancelCrop = $('#btn-cancel-crop'); const $btnFlipX = $('#btn-flip-x'); const $btnFlipY = $('#btn-flip-y'); const $btnResetFlip = $('#btn-reset-flip'); const $btnRotateClockwise = $('#btn-rotate-clockwise'); const $btnRotateCounterClockWise = $('#btn-rotate-counter-clockwise'); const $btnText = $('#btn-text'); const $btnTextStyle = $('.btn-text-style'); const $btnAddIcon = $('#btn-add-icon'); const $btnRegisterIcon = $('#btn-register-icon'); const $btnMaskFilter = $('#btn-mask-filter'); const $btnImageFilter = $('#btn-image-filter'); const $btnLoadMaskImage = $('#input-mask-image-file'); const $btnApplyMask = $('#btn-apply-mask'); const $btnClose = $('.close'); // Input etc. const $inputRotationRange = $('#input-rotation-range'); const $inputBrushWidthRange = $('#input-brush-width-range'); const $inputFontSizeRange = $('#input-font-size-range'); const $inputStrokeWidthRange = $('#input-stroke-width-range'); const $inputCheckTransparent = $('#input-check-transparent'); const $inputCheckGrayscale = $('#input-check-grayscale'); const $inputCheckInvert = $('#input-check-invert'); const $inputCheckSepia = $('#input-check-sepia'); const $inputCheckSepia2 = $('#input-check-sepia2'); const $inputCheckBlur = $('#input-check-blur'); const $inputCheckSharpen = $('#input-check-sharpen'); const $inputCheckEmboss = $('#input-check-emboss'); const $inputCheckRemoveWhite = $('#input-check-remove-white'); const $inputRangeRemoveWhiteThreshold = $('#input-range-remove-white-threshold'); const $inputRangeRemoveWhiteDistance = $('#input-range-remove-white-distance'); const $inputCheckBrightness = $('#input-check-brightness'); const $inputRangeBrightnessValue = $('#input-range-brightness-value'); const $inputCheckNoise = $('#input-check-noise'); const $inputRangeNoiseValue = $('#input-range-noise-value'); const $inputCheckGradientTransparency = $('#input-check-gradient-transparancy'); const $inputRangeGradientTransparencyValue = $('#input-range-gradient-transparency-value'); const $inputCheckPixelate = $('#input-check-pixelate'); const $inputRangePixelateValue = $('#input-range-pixelate-value'); const $inputCheckTint = $('#input-check-tint'); const $inputRangeTintOpacityValue = $('#input-range-tint-opacity-value'); const $inputCheckMultiply = $('#input-check-multiply'); const $inputCheckBlend = $('#input-check-blend'); const $inputCheckColorFilter = $('#input-check-color-filter'); const $inputRangeColorFilterValue = $('#input-range-color-filter-value'); // Sub menus let $displayingSubMenu = $(); const $cropSubMenu = $('#crop-sub-menu'); const $flipSubMenu = $('#flip-sub-menu'); const $rotationSubMenu = $('#rotation-sub-menu'); const $freeDrawingSubMenu = $('#free-drawing-sub-menu'); const $drawLineSubMenu = $('#draw-line-sub-menu'); const $drawShapeSubMenu = $('#draw-shape-sub-menu'); const $textSubMenu = $('#text-sub-menu'); const $iconSubMenu = $('#icon-sub-menu'); const $filterSubMenu = $('#filter-sub-menu'); const $imageFilterSubMenu = $('#image-filter-sub-menu'); // Select line type const $selectLine = $('[name="select-line-type"]'); // Select shape type const $selectShapeType = $('[name="select-shape-type"]'); // Select color of shape type const $selectColorType = $('[name="select-color-type"]'); // Select blend type const $selectBlendType = $('[name="select-blend-type"]'); // Image editor const imageEditor = new tui.ImageEditor('.tui-image-editor', { cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70 } }); // Color picker for free drawing const brushColorpicker = tui.colorPicker.create({ container: $('#tui-brush-color-picker')[0], color: '#000000' }); // Color picker for text palette const textColorpicker = tui.colorPicker.create({ container: $('#tui-text-color-picker')[0], color: '#000000' }); // Color picker for shape const shapeColorpicker = tui.colorPicker.create({ container: $('#tui-shape-color-picker')[0], color: '#000000' }); // Color picker for icon const iconColorpicker = tui.colorPicker.create({ container: $('#tui-icon-color-picker')[0], color: '#000000' }); const tintColorpicker = tui.colorPicker.create({ container: $('#tui-tint-color-picker')[0], color: '#000000' }); const multiplyColorpicker = tui.colorPicker.create({ container: $('#tui-multiply-color-picker')[0], color: '#000000' }); const blendColorpicker = tui.colorPicker.create({ container: $('#tui-blend-color-picker')[0], color: '#00FF00' }); // Common global functions // HEX to RGBA function hexToRGBa(hex, alpha) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); const a = alpha || 1; return `rgba(${r}, ${g}, ${b}, ${a})`; } function base64ToBlob(data) { let mimeString = ''; let raw, uInt8Array, i, rawLength; raw = data.replace(rImageType, (header, imageType) => { mimeString = imageType; return ''; }); raw = atob(raw); rawLength = raw.length; uInt8Array = new Uint8Array(rawLength); // eslint-disable-line for (i = 0; i < rawLength; i += 1) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], {type: mimeString}); } function resizeEditor() { const $editor = $('.tui-image-editor'); const $container = $('.tui-image-editor-canvas-container'); const height = parseFloat($container.css('max-height')); $editor.height(height); } function getBrushSettings() { const brushWidth = $inputBrushWidthRange.val(); const brushColor = brushColorpicker.getColor(); return { width: brushWidth, color: hexToRGBa(brushColor, 0.5) }; } function activateShapeMode() { if (imageEditor.getDrawingMode() !== 'SHAPE') { imageEditor.stopDrawingMode(); imageEditor.startDrawingMode('SHAPE'); } } function activateIconMode() { imageEditor.stopDrawingMode(); } function activateTextMode() { if (imageEditor.getDrawingMode() !== 'TEXT') { imageEditor.stopDrawingMode(); imageEditor.startDrawingMode('TEXT'); } } function setTextToolbar(obj) { const fontSize = obj.fontSize; const fontColor = obj.fill; $inputFontSizeRange.val(fontSize); textColorpicker.setColor(fontColor); } function setIconToolbar(obj) { const iconColor = obj.fill; iconColorpicker.setColor(iconColor); } function setShapeToolbar(obj) { let strokeColor, fillColor, isTransparent; const colorType = $selectColorType.val(); if (colorType === 'stroke') { strokeColor = obj.stroke; isTransparent = (strokeColor === 'transparent'); if (!isTransparent) { shapeColorpicker.setColor(strokeColor); } } else if (colorType === 'fill') { fillColor = obj.fill; isTransparent = (fillColor === 'transparent'); if (!isTransparent) { shapeColorpicker.setColor(fillColor); } } $inputCheckTransparent.prop('checked', isTransparent); $inputStrokeWidthRange.val(obj.strokeWidth); } function showSubMenu(type) { let $submenu; switch (type) { case 'shape': $submenu = $drawShapeSubMenu; break; case 'icon': $submenu = $iconSubMenu; break; case 'text': $submenu = $textSubMenu; break; default: $submenu = 0; } $displayingSubMenu.hide(); $displayingSubMenu = $submenu.show(); } function applyOrRemoveFilter(applying, type, options) { if (applying) { imageEditor.applyFilter(type, options).then(result => { console.log(result); }); } else { imageEditor.removeFilter(type); } } // Attach image editor custom events imageEditor.on({ objectAdded(objectProps) { console.info(objectProps); }, undoStackChanged(length) { if (length) { $btnUndo.removeClass('disabled'); } else { $btnUndo.addClass('disabled'); } resizeEditor(); }, redoStackChanged(length) { if (length) { $btnRedo.removeClass('disabled'); } else { $btnRedo.addClass('disabled'); } resizeEditor(); }, objectScaled(obj) { if (obj.type === 'text') { $inputFontSizeRange.val(obj.fontSize); } }, addText(pos) { imageEditor.addText('Double Click', { position: pos.originPosition }).then(objectProps => { console.log(objectProps); }); }, objectActivated(obj) { activeObjectId = obj.id; if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') { showSubMenu('shape'); setShapeToolbar(obj); activateShapeMode(); } else if (obj.type === 'icon') { showSubMenu('icon'); setIconToolbar(obj); activateIconMode(); } else if (obj.type === 'text') { showSubMenu('text'); setTextToolbar(obj); activateTextMode(); } }, mousedown(event, originPointer) { if ($imageFilterSubMenu.is(':visible') && imageEditor.hasFilter('colorFilter')) { imageEditor.applyFilter('colorFilter', { x: parseInt(originPointer.x, 10), y: parseInt(originPointer.y, 10) }); } } }); // Attach button click event listeners $btns.on('click', () => { $btnsActivatable.removeClass('active'); }); $btnsActivatable.on('click', function() { $(this).addClass('active'); }); $btnUndo.on('click', function() { $displayingSubMenu.hide(); if (!$(this).hasClass('disabled')) { imageEditor.undo(); } }); $btnRedo.on('click', function() { $displayingSubMenu.hide(); if (!$(this).hasClass('disabled')) { imageEditor.redo(); } }); $btnClearObjects.on('click', () => { $displayingSubMenu.hide(); imageEditor.clearObjects(); }); $btnRemoveActiveObject.on('click', () => { $displayingSubMenu.hide(); imageEditor.removeObject(activeObjectId); }); $btnCrop.on('click', () => { imageEditor.startDrawingMode('CROPPER'); $displayingSubMenu.hide(); $displayingSubMenu = $cropSubMenu.show(); }); $btnFlip.on('click', () => { imageEditor.stopDrawingMode(); $displayingSubMenu.hide(); $displayingSubMenu = $flipSubMenu.show(); }); $btnRotation.on('click', () => { imageEditor.stopDrawingMode(); $displayingSubMenu.hide(); $displayingSubMenu = $rotationSubMenu.show(); }); $btnClose.on('click', () => { imageEditor.stopDrawingMode(); $displayingSubMenu.hide(); }); $btnApplyCrop.on('click', () => { imageEditor.crop(imageEditor.getCropzoneRect()).then(() => { imageEditor.stopDrawingMode(); resizeEditor(); }); }); $btnCancelCrop.on('click', () => { imageEditor.stopDrawingMode(); }); $btnFlipX.on('click', () => { imageEditor.flipX().then(status => { console.log('flipX: ', status.flipX); console.log('flipY: ', status.flipY); console.log('angle: ', status.angle); }); }); $btnFlipY.on('click', () => { imageEditor.flipY().then(status => { console.log('flipX: ', status.flipX); console.log('flipY: ', status.flipY); console.log('angle: ', status.angle); }); }); $btnResetFlip.on('click', () => { imageEditor.resetFlip().then(status => { console.log('flipX: ', status.flipX); console.log('flipY: ', status.flipY); console.log('angle: ', status.angle); }); }); $btnRotateClockwise.on('click', () => { imageEditor.rotate(30); }); $btnRotateCounterClockWise.on('click', () => { imageEditor.rotate(-30); }); $inputRotationRange.on('mousedown', () => { const changeAngle = function() { imageEditor.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](() => {}); }; $(document).on('mousemove', changeAngle); $(document).on('mouseup', function stopChangingAngle() { $(document).off('mousemove', changeAngle); $(document).off('mouseup', stopChangingAngle); }); }); $inputRotationRange.on('change', () => { imageEditor.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](() => {}); }); $inputBrushWidthRange.on('change', function() { imageEditor.setBrush({width: parseInt(this.value, 10)}); }); $inputImage.on('change', event => { let file; if (!supportingFileAPI) { alert('This browser does not support file-api'); } file = event.target.files[0]; imageEditor.loadImageFromFile(file).then(result => { console.log(result); imageEditor.clearUndoStack(); }); }); $btnDownload.on('click', () => { let imageName = imageEditor.getImageName(); const dataURL = imageEditor.toDataURL(); let blob, type, w; if (supportingFileAPI) { blob = base64ToBlob(dataURL); type = blob.type.split('/')[1]; if (imageName.split('.').pop() !== type) { imageName += `.${type}`; } // Library: FileSaver - saveAs saveAs(blob, imageName); // eslint-disable-line } else { alert('This browser needs a file-server'); w = window.open(); w.document.body.innerHTML = `<img src=${dataURL}>`; } }); // control draw line mode $btnDrawLine.on('click', () => { imageEditor.stopDrawingMode(); $displayingSubMenu.hide(); $displayingSubMenu = $drawLineSubMenu.show(); $selectLine.eq(0).change(); }); $selectLine.on('change', function() { const mode = $(this).val(); const settings = getBrushSettings(); imageEditor.stopDrawingMode(); if (mode === 'freeDrawing') { imageEditor.startDrawingMode('FREE_DRAWING', settings); } else { imageEditor.startDrawingMode('LINE_DRAWING', settings); } }); brushColorpicker.on('selectColor', event => { imageEditor.setBrush({ color: hexToRGBa(event.color, 0.5) }); }); // control draw shape mode $btnDrawShape.on('click', () => { showSubMenu('shape'); // step 1. get options to draw shape from toolbar shapeType = $('[name="select-shape-type"]:checked').val(); shapeOptions.stroke = '#000000'; shapeOptions.fill = '#ffffff'; shapeOptions.strokeWidth = Number($inputStrokeWidthRange.val()); // step 2. set options to draw shape imageEditor.setDrawingShape(shapeType, shapeOptions); // step 3. start drawing shape mode activateShapeMode(); }); $selectShapeType.on('change', function() { shapeType = $(this).val(); imageEditor.setDrawingShape(shapeType); }); $inputCheckTransparent.on('change', function() { const colorType = $selectColorType.val(); const isTransparent = $(this).prop('checked'); let color; if (!isTransparent) { color = shapeColorpicker.getColor(); } else { color = 'transparent'; } if (colorType === 'stroke') { imageEditor.changeShape(activeObjectId, { stroke: color }); } else if (colorType === 'fill') { imageEditor.changeShape(activeObjectId, { fill: color }); } imageEditor.setDrawingShape(shapeType, shapeOptions); }); shapeColorpicker.on('selectColor', event => { const colorType = $selectColorType.val(); const isTransparent = $inputCheckTransparent.prop('checked'); const color = event.color; if (isTransparent) { return; } if (colorType === 'stroke') { imageEditor.changeShape(activeObjectId, { stroke: color }); } else if (colorType === 'fill') { imageEditor.changeShape(activeObjectId, { fill: color }); } imageEditor.setDrawingShape(shapeType, shapeOptions); }); $inputStrokeWidthRange.on('change', function() { const strokeWidth = Number($(this).val()); imageEditor.changeShape(activeObjectId, { strokeWidth }); imageEditor.setDrawingShape(shapeType, shapeOptions); }); // control text mode $btnText.on('click', () => { showSubMenu('text'); activateTextMode(); }); $inputFontSizeRange.on('change', function() { imageEditor.changeTextStyle(activeObjectId, { fontSize: parseInt(this.value, 10) }); }); $btnTextStyle.on('click', function(e) { // eslint-disable-line const styleType = $(this).attr('data-style-type'); let styleObj; e.stopPropagation(); switch (styleType) { case 'b': styleObj = {fontWeight: 'bold'}; break; case 'i': styleObj = {fontStyle: 'italic'}; break; case 'u': styleObj = {textDecoration: 'underline'}; break; case 'l': styleObj = {textAlign: 'left'}; break; case 'c': styleObj = {textAlign: 'center'}; break; case 'r': styleObj = {textAlign: 'right'}; break; default: styleObj = {}; } imageEditor.changeTextStyle(activeObjectId, styleObj); }); textColorpicker.on('selectColor', event => { imageEditor.changeTextStyle(activeObjectId, { 'fill': event.color }); }); // control icon $btnAddIcon.on('click', () => { showSubMenu('icon'); activateIconMode(); }); function onClickIconSubMenu(event) { const element = event.target || event.srcElement; const iconType = $(element).attr('data-icon-type'); imageEditor.once('mousedown', (e, originPointer) => { imageEditor.addIcon(iconType, { left: originPointer.x, top: originPointer.y }).then(objectProps => { // console.log(objectProps); }); }); } $btnRegisterIcon.on('click', () => { $iconSubMenu.find('.menu-item').eq(3).after( '<li id="customArrow" class="menu-item icon-text" data-icon-type="customArrow">?</li>' ); imageEditor.registerIcons({ customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z' }); $btnRegisterIcon.off('click'); $iconSubMenu.on('click', '#customArrow', onClickIconSubMenu); }); $iconSubMenu.on('click', '.icon-text', onClickIconSubMenu); iconColorpicker.on('selectColor', event => { imageEditor.changeIconColor(activeObjectId, event.color); }); // control mask filter $btnMaskFilter.on('click', () => { imageEditor.stopDrawingMode(); $displayingSubMenu.hide(); $displayingSubMenu = $filterSubMenu.show(); }); $btnImageFilter.on('click', () => { const filters = { 'grayscale': $inputCheckGrayscale, 'invert': $inputCheckInvert, 'sepia': $inputCheckSepia, 'sepia2': $inputCheckSepia2, 'blur': $inputCheckBlur, 'shapren': $inputCheckSharpen, 'emboss': $inputCheckEmboss, 'removeWhite': $inputCheckRemoveWhite, 'brightness': $inputCheckBrightness, 'noise': $inputCheckNoise, 'gradientTransparency': $inputCheckGradientTransparency, 'pixelate': $inputCheckPixelate, 'tint': $inputCheckTint, 'multiply': $inputCheckMultiply, 'blend': $inputCheckBlend, 'colorFilter': $inputCheckColorFilter }; tui.util.forEach(filters, ($value, key) => { $value.prop('checked', imageEditor.hasFilter(key)); }); $displayingSubMenu.hide(); $displayingSubMenu = $imageFilterSubMenu.show(); }); $btnLoadMaskImage.on('change', () => { let file; let imgUrl; if (!supportingFileAPI) { alert('This browser does not support file-api'); } file = event.target.files[0]; if (file) { imgUrl = URL.createObjectURL(file); imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(() => { imageEditor.addImageObject(imgUrl).then(objectProps => { URL.revokeObjectURL(file); console.log(objectProps); }); }); } }); $btnApplyMask.on('click', () => { imageEditor.applyFilter('mask', { maskObjId: activeObjectId }).then(result => { console.log(result); }); }); $inputCheckGrayscale.on('change', function() { applyOrRemoveFilter(this.checked, 'Grayscale', null); }); $inputCheckInvert.on('change', function() { applyOrRemoveFilter(this.checked, 'Invert', null); }); $inputCheckSepia.on('change', function() { applyOrRemoveFilter(this.checked, 'Sepia', null); }); $inputCheckSepia2.on('change', function() { applyOrRemoveFilter(this.checked, 'Sepia2', null); }); $inputCheckBlur.on('change', function() { applyOrRemoveFilter(this.checked, 'Blur', null); }); $inputCheckSharpen.on('change', function() { applyOrRemoveFilter(this.checked, 'Sharpen', null); }); $inputCheckEmboss.on('change', function() { applyOrRemoveFilter(this.checked, 'Emboss', null); }); $inputCheckRemoveWhite.on('change', function() { applyOrRemoveFilter(this.checked, 'removeWhite', { threshold: parseInt($inputRangeRemoveWhiteThreshold.val(), 10), distance: parseInt($inputRangeRemoveWhiteDistance.val(), 10) }); }); $inputRangeRemoveWhiteThreshold.on('change', function() { applyOrRemoveFilter($inputCheckRemoveWhite.is(':checked'), 'removeWhite', { threshold: parseInt(this.value, 10) }); }); $inputRangeRemoveWhiteDistance.on('change', function() { applyOrRemoveFilter($inputCheckRemoveWhite.is(':checked'), 'removeWhite', { distance: parseInt(this.value, 10) }); }); $inputCheckBrightness.on('change', function() { applyOrRemoveFilter(this.checked, 'brightness', { brightness: parseInt($inputRangeBrightnessValue.val(), 10) }); }); $inputRangeBrightnessValue.on('change', function() { applyOrRemoveFilter($inputCheckBrightness.is(':checked'), 'brightness', { brightness: parseInt(this.value, 10) }); }); $inputCheckNoise.on('change', function() { applyOrRemoveFilter(this.checked, 'noise', { noise: parseInt($inputRangeNoiseValue.val(), 10) }); }); $inputRangeNoiseValue.on('change', function() { applyOrRemoveFilter($inputCheckNoise.is(':checked'), 'noise', { noise: parseInt(this.value, 10) }); }); $inputCheckGradientTransparency.on('change', function() { applyOrRemoveFilter(this.checked, 'gradientTransparency', { threshold: parseInt($inputRangeGradientTransparencyValue.val(), 10) }); }); $inputRangeGradientTransparencyValue.on('change', function() { applyOrRemoveFilter($inputCheckGradientTransparency.is(':checked'), 'gradientTransparency', { threshold: parseInt(this.value, 10) }); }); $inputCheckPixelate.on('change', function() { applyOrRemoveFilter(this.checked, 'pixelate', { blocksize: parseInt($inputRangePixelateValue.val(), 10) }); }); $inputRangePixelateValue.on('change', function() { applyOrRemoveFilter($inputCheckPixelate.is(':checked'), 'pixelate', { blocksize: parseInt(this.value, 10) }); }); $inputCheckTint.on('change', function() { applyOrRemoveFilter(this.checked, 'tint', { color: tintColorpicker.getColor(), opacity: parseFloat($inputRangeTintOpacityValue.val()) }); }); tintColorpicker.on('selectColor', e => { applyOrRemoveFilter($inputCheckTint.is(':checked'), 'tint', { color: e.color }); }); $inputRangeTintOpacityValue.on('change', () => { applyOrRemoveFilter($inputCheckTint.is(':checked'), 'tint', { opacity: parseFloat($inputRangeTintOpacityValue.val()) }); }); $inputCheckMultiply.on('change', function() { applyOrRemoveFilter(this.checked, 'multiply', { color: multiplyColorpicker.getColor() }); }); multiplyColorpicker.on('selectColor', e => { applyOrRemoveFilter($inputCheckMultiply.is(':checked'), 'multiply', { color: e.color }); }); $inputCheckBlend.on('change', function() { applyOrRemoveFilter(this.checked, 'blend', { color: blendColorpicker.getColor(), mode: $selectBlendType.val() }); }); blendColorpicker.on('selectColor', e => { applyOrRemoveFilter($inputCheckBlend.is(':checked'), 'blend', { color: e.color }); }); $selectBlendType.on('change', function() { applyOrRemoveFilter($inputCheckBlend.is(':checked'), 'blend', { mode: this.value }); }); $inputCheckColorFilter.on('change', function() { applyOrRemoveFilter(this.checked, 'colorFilter', { color: '#FFFFFF', threshold: $inputRangeColorFilterValue.val() }); }); $inputRangeColorFilterValue.on('change', function() { applyOrRemoveFilter($inputCheckColorFilter.is(':checked'), 'colorFilter', { threshold: this.value }); }); // Etc.. // Load sample image imageEditor.loadImageFromURL('img/sampleImage.jpg', 'SampleImage').then(sizeValue => { console.log(sizeValue); imageEditor.clearUndoStack(); }); // IE9 Unselectable $('.menu').on('selectstart', () => false);