PHP Classes

File: javascript/service-basic.js

Recommend this page to a friend!
  Classes of Mark de Leon   PHP Document Scanner using SANE or eSCL AirPrint   javascript/service-basic.js   Download  
File: javascript/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,196 bytes
 

Contents

Class file image Download
/** * basic.js * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com> * @fileoverview */ 'use strict'; var supportingFileAPI = !!(window.File && window.FileList && window.FileReader); var rImageType = /data:(image\/.+);base64,/; var shapeOptions = {}; var shapeType; var activeObjectId; // Buttons var $btns = $('.menu-item'); var $btnsActivatable = $btns.filter('.activatable'); var $inputImage = $('#input-image-file'); var $btnDownload = $('#btn-download'); var $btnUndo = $('#btn-undo'); var $btnRedo = $('#btn-redo'); var $btnClearObjects = $('#btn-clear-objects'); var $btnRemoveActiveObject = $('#btn-remove-active-object'); var $btnCrop = $('#btn-crop'); var $btnFlip = $('#btn-flip'); var $btnRotation = $('#btn-rotation'); var $btnDrawLine = $('#btn-draw-line'); var $btnDrawShape = $('#btn-draw-shape'); var $btnApplyCrop = $('#btn-apply-crop'); var $btnCancelCrop = $('#btn-cancel-crop'); var $btnFlipX = $('#btn-flip-x'); var $btnFlipY = $('#btn-flip-y'); var $btnResetFlip = $('#btn-reset-flip'); var $btnRotateClockwise = $('#btn-rotate-clockwise'); var $btnRotateCounterClockWise = $('#btn-rotate-counter-clockwise'); var $btnText = $('#btn-text'); var $btnTextStyle = $('.btn-text-style'); var $btnAddIcon = $('#btn-add-icon'); var $btnRegisterIcon = $('#btn-register-icon'); var $btnMaskFilter = $('#btn-mask-filter'); var $btnImageFilter = $('#btn-image-filter'); var $btnLoadMaskImage = $('#input-mask-image-file'); var $btnApplyMask = $('#btn-apply-mask'); var $btnClose = $('.close'); // Input etc. var $inputRotationRange = $('#input-rotation-range'); var $inputBrushWidthRange = $('#input-brush-width-range'); var $inputFontSizeRange = $('#input-font-size-range'); var $inputStrokeWidthRange = $('#input-stroke-width-range'); var $inputCheckTransparent = $('#input-check-transparent'); var $inputCheckGrayscale = $('#input-check-grayscale'); var $inputCheckInvert = $('#input-check-invert'); var $inputCheckSepia = $('#input-check-sepia'); var $inputCheckSepia2 = $('#input-check-sepia2'); var $inputCheckBlur = $('#input-check-blur'); var $inputCheckSharpen = $('#input-check-sharpen'); var $inputCheckEmboss = $('#input-check-emboss'); var $inputCheckRemoveWhite = $('#input-check-remove-white'); var $inputRangeRemoveWhiteThreshold = $('#input-range-remove-white-threshold'); var $inputRangeRemoveWhiteDistance = $('#input-range-remove-white-distance'); var $inputCheckBrightness = $('#input-check-brightness'); var $inputRangeBrightnessValue = $('#input-range-brightness-value'); var $inputCheckNoise = $('#input-check-noise'); var $inputRangeNoiseValue = $('#input-range-noise-value'); var $inputCheckGradientTransparency = $('#input-check-gradient-transparancy'); var $inputRangeGradientTransparencyValue = $('#input-range-gradient-transparency-value'); var $inputCheckPixelate = $('#input-check-pixelate'); var $inputRangePixelateValue = $('#input-range-pixelate-value'); var $inputCheckTint = $('#input-check-tint'); var $inputRangeTintOpacityValue = $('#input-range-tint-opacity-value'); var $inputCheckMultiply = $('#input-check-multiply'); var $inputCheckBlend = $('#input-check-blend'); var $inputCheckColorFilter = $('#input-check-color-filter'); var $inputRangeColorFilterValue = $('#input-range-color-filter-value'); // Sub menus var $displayingSubMenu = $(); var $cropSubMenu = $('#crop-sub-menu'); var $flipSubMenu = $('#flip-sub-menu'); var $rotationSubMenu = $('#rotation-sub-menu'); var $freeDrawingSubMenu = $('#free-drawing-sub-menu'); var $drawLineSubMenu = $('#draw-line-sub-menu'); var $drawShapeSubMenu = $('#draw-shape-sub-menu'); var $textSubMenu = $('#text-sub-menu'); var $iconSubMenu = $('#icon-sub-menu'); var $filterSubMenu = $('#filter-sub-menu'); var $imageFilterSubMenu = $('#image-filter-sub-menu'); // Select line type var $selectLine = $('[name="select-line-type"]'); // Select shape type var $selectShapeType = $('[name="select-shape-type"]'); // Select color of shape type var $selectColorType = $('[name="select-color-type"]'); //Select blend type var $selectBlendType = $('[name="select-blend-type"]'); // Image editor var imageEditor = new tui.ImageEditor('.tui-image-editor', { cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70 } }); // Color picker for free drawing var brushColorpicker = tui.component.colorpicker.create({ container: $('#tui-brush-color-picker')[0], color: '#000000' }); // Color picker for text palette var textColorpicker = tui.component.colorpicker.create({ container: $('#tui-text-color-picker')[0], color: '#000000' }); // Color picker for shape var shapeColorpicker = tui.component.colorpicker.create({ container: $('#tui-shape-color-picker')[0], color: '#000000' }); // Color picker for icon var iconColorpicker = tui.component.colorpicker.create({ container: $('#tui-icon-color-picker')[0], color: '#000000' }); var tintColorpicker = tui.component.colorpicker.create({ container: $('#tui-tint-color-picker')[0], color: '#000000' }); var multiplyColorpicker = tui.component.colorpicker.create({ container: $('#tui-multiply-color-picker')[0], color: '#000000' }); var blendColorpicker = tui.component.colorpicker.create({ container: $('#tui-blend-color-picker')[0], color: '#00FF00' }); // Common global functions // HEX to RGBA function hexToRGBa(hex, alpha) { var r = parseInt(hex.slice(1, 3), 16); var g = parseInt(hex.slice(3, 5), 16); var b = parseInt(hex.slice(5, 7), 16); var a = alpha || 1; return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')'; } function base64ToBlob(data) { var mimeString = ''; var raw, uInt8Array, i, rawLength; raw = data.replace(rImageType, function(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() { var $editor = $('.tui-image-editor'); var $container = $('.tui-image-editor-canvas-container'); var height = parseFloat($container.css('max-height')); $editor.height(height); } function getBrushSettings() { var brushWidth = $inputBrushWidthRange.val(); var 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) { var fontSize = obj.fontSize; var fontColor = obj.fill; $inputFontSizeRange.val(fontSize); textColorpicker.setColor(fontColor); } function setIconToolbar(obj) { var iconColor = obj.fill; iconColorpicker.setColor(iconColor); } function setShapeToolbar(obj) { var strokeColor, fillColor, isTransparent; var 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) { var $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: function(objectProps) { console.info(objectProps); }, undoStackChanged: function(length) { if (length) { $btnUndo.removeClass('disabled'); } else { $btnUndo.addClass('disabled'); } resizeEditor(); }, redoStackChanged: function(length) { if (length) { $btnRedo.removeClass('disabled'); } else { $btnRedo.addClass('disabled'); } resizeEditor(); }, objectScaled: function(obj) { if (obj.type === 'text') { $inputFontSizeRange.val(obj.fontSize); } }, addText: function(pos) { imageEditor.addText('Double Click', { position: pos.originPosition }).then(objectProps => { console.log(objectProps); }); }, objectActivated: function(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: function(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', function() { $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', function() { $displayingSubMenu.hide(); imageEditor.clearObjects(); }); $btnRemoveActiveObject.on('click', function() { $displayingSubMenu.hide(); imageEditor.removeObject(activeObjectId); }); $btnCrop.on('click', function() { imageEditor.startDrawingMode('CROPPER'); $displayingSubMenu.hide(); $displayingSubMenu = $cropSubMenu.show(); }); $btnFlip.on('click', function() { imageEditor.stopDrawingMode(); $displayingSubMenu.hide(); $displayingSubMenu = $flipSubMenu.show(); }); $btnRotation.on('click', function() { imageEditor.stopDrawingMode(); $displayingSubMenu.hide(); $displayingSubMenu = $rotationSubMenu.show(); }); $btnClose.on('click', function() { imageEditor.stopDrawingMode(); $displayingSubMenu.hide(); }); $btnApplyCrop.on('click', function() { imageEditor.crop(imageEditor.getCropzoneRect()).then(() => { imageEditor.stopDrawingMode(); resizeEditor(); }); }); $btnCancelCrop.on('click', function() { imageEditor.stopDrawingMode(); }); $btnFlipX.on('click', function() { imageEditor.flipX().then(status => { console.log('flipX: ', status.flipX); console.log('flipY: ', status.flipY); console.log('angle: ', status.angle); }); }); $btnFlipY.on('click', function() { imageEditor.flipY().then(status => { console.log('flipX: ', status.flipX); console.log('flipY: ', status.flipY); console.log('angle: ', status.angle); }); }); $btnResetFlip.on('click', function() { imageEditor.resetFlip().then(status => { console.log('flipX: ', status.flipX); console.log('flipY: ', status.flipY); console.log('angle: ', status.angle); }); }); $btnRotateClockwise.on('click', function() { imageEditor.rotate(30); }); $btnRotateCounterClockWise.on('click', function() { imageEditor.rotate(-30); }); $inputRotationRange.on('mousedown', function() { var 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', function() { imageEditor.setAngle(parseInt($inputRotationRange.val(), 10)).catch(() => {}); }); $inputBrushWidthRange.on('change', function() { imageEditor.setBrush({width: parseInt(this.value, 10)}); }); $inputImage.on('change', function(event) { var 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', function() { var imageName = imageEditor.getImageName(); var dataURL = imageEditor.toDataURL(); var 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', function() { imageEditor.stopDrawingMode(); $displayingSubMenu.hide(); $displayingSubMenu = $drawLineSubMenu.show(); $selectLine.eq(0).change(); }); $selectLine.on('change', function() { var mode = $(this).val(); var settings = getBrushSettings(); imageEditor.stopDrawingMode(); if (mode === 'freeDrawing') { imageEditor.startDrawingMode('FREE_DRAWING', settings); } else { imageEditor.startDrawingMode('LINE_DRAWING', settings); } }); brushColorpicker.on('selectColor', function(event) { imageEditor.setBrush({ color: hexToRGBa(event.color, 0.5) }); }); // control draw shape mode $btnDrawShape.on('click', function() { 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() { var colorType = $selectColorType.val(); var isTransparent = $(this).prop('checked'); var 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', function(event) { var colorType = $selectColorType.val(); var isTransparent = $inputCheckTransparent.prop('checked'); var 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() { var strokeWidth = Number($(this).val()); imageEditor.changeShape(activeObjectId, { strokeWidth: strokeWidth }); imageEditor.setDrawingShape(shapeType, shapeOptions); }); // control text mode $btnText.on('click', function() { showSubMenu('text'); activateTextMode(); }); $inputFontSizeRange.on('change', function() { imageEditor.changeTextStyle(activeObjectId, { fontSize: parseInt(this.value, 10) }); }); $btnTextStyle.on('click', function(e) { // eslint-disable-line var styleType = $(this).attr('data-style-type'); var 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', function(event) { imageEditor.changeTextStyle(activeObjectId, { 'fill': event.color }); }); // control icon $btnAddIcon.on('click', function() { showSubMenu('icon'); activateIconMode(); }); function onClickIconSubMenu(event) { var element = event.target || event.srcElement; var iconType = $(element).attr('data-icon-type'); imageEditor.once('mousedown', function(e, originPointer) { imageEditor.addIcon(iconType, { left: originPointer.x, top: originPointer.y }).then(objectProps => { // console.log(objectProps); }); }); } $btnRegisterIcon.on('click', function() { $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', function(event) { imageEditor.changeIconColor(activeObjectId, event.color); }); // control mask filter $btnMaskFilter.on('click', function() { imageEditor.stopDrawingMode(); $displayingSubMenu.hide(); $displayingSubMenu = $filterSubMenu.show(); }); $btnImageFilter.on('click', function() { var 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, function($value, key) { $value.prop('checked', imageEditor.hasFilter(key)); }); $displayingSubMenu.hide(); $displayingSubMenu = $imageFilterSubMenu.show(); }); $btnLoadMaskImage.on('change', function() { var file; var 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', function() { 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', function(e) { applyOrRemoveFilter($inputCheckTint.is(':checked'), 'tint', { color: e.color }); }); $inputRangeTintOpacityValue.on('change', function() { applyOrRemoveFilter($inputCheckTint.is(':checked'), 'tint', { opacity: parseFloat($inputRangeTintOpacityValue.val()) }); }); $inputCheckMultiply.on('change', function() { applyOrRemoveFilter(this.checked, 'multiply', { color: multiplyColorpicker.getColor() }); }); multiplyColorpicker.on('selectColor', function(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', function(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', function() { return false; });