0

我正在尝试在按钮单击时添加图像,就像我们在 TUI 图像编辑器 Mobile 中调用图标或形状一样。所以为此,我在service-mobile.js中添加了以下代码

var $btnAddImageShade = $('#btn-add-image-shade');

$btnAddImageShade.on('click', function() {
    imageEditor.addImageObject('img/shade1.png').then(objectProps => {
            imageEditor.setObjectPosition(objectProps.id, {
                x: 530,
                y: 0,
                originX: 'left',
                originY: 'top'
            });
                     });
});

并在主页上

<button class="submenu-button" id="btn-add-image-shade">Image 1</button>

在按钮单击时调用图像是正确的代码吗?

/**
 * mobile.js
 * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>
 * @fileoverview
 */
/* eslint-disable vars-on-top,no-var,strict,prefer-template,prefer-arrow-callback,prefer-destructuring,object-shorthand,require-jsdoc,complexity */
'use strict';

var MAX_RESOLUTION = 3264 * 2448; // 8MP (Mega Pixel)

var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
var rImageType = /data:(image\/.+);base64,/;
var shapeOpt = {
    fill: '#fff',
    stroke: '#000',
    strokeWidth: 10
};
var activeObjectId;

// Selector of image editor controls
var submenuClass = '.submenu';
var hiddenmenuClass = '.hiddenmenu';

var $controls = $('.tui-image-editor-controls');
var $menuButtons = $controls.find('.menu-button');
var $submenuButtons = $controls.find('.submenu-button');
var $btnShowMenu = $controls.find('.btn-prev');
var $msg = $controls.find('.msg');

var $subMenus = $controls.find(submenuClass);
var $hiddenMenus = $controls.find(hiddenmenuClass);

// Image editor controls - top menu buttons
var $inputImage = $('#input-image-file');
var $btnDownload = $('#btn-download');
var $btnUndo = $('#btn-undo');
var $btnRedo = $('#btn-redo');
var $btnRemoveActiveObject = $('#btn-remove-active-object');

// Image editor controls - bottom menu buttons
var $btnCrop = $('#btn-crop');
var $btnAddText = $('#btn-add-text');

// Image editor controls - bottom submenu buttons
var $btnApplyCrop = $('#btn-apply-crop');
var $btnFlipX = $('#btn-flip-x');
var $btnFlipY = $('#btn-flip-y');
var $btnRotateClockwise = $('#btn-rotate-clockwise');
var $btnRotateCounterClockWise = $('#btn-rotate-counter-clockwise');
var $btnAddArrowIcon = $('#btn-add-arrow-icon');
var $btnAddCancelIcon = $('#btn-add-cancel-icon');
var $btnAddCustomIcon = $('#btn-add-custom-icon');
var $btnAddImageShade = $('#btn-add-image-shade');
var $btnFreeDrawing = $('#btn-free-drawing');
var $btnLineDrawing = $('#btn-line-drawing');
var $btnAddRect = $('#btn-add-rect');
var $btnAddSquare = $('#btn-add-square');
var $btnAddEllipse = $('#btn-add-ellipse');
var $btnAddCircle = $('#btn-add-circle');
var $btnAddTriangle = $('#btn-add-triangle');
var $btnChangeTextStyle = $('.btn-change-text-style');

// Image editor controls - etc.
var $inputTextSizeRange = $('#input-text-size-range');
var $inputBrushWidthRange = $('#input-brush-range');
var $inputStrokeWidthRange = $('#input-stroke-range');
var $inputCheckTransparent = $('#input-check-transparent');

// Colorpicker
var iconColorpicker = tui.colorPicker.create({
    container: $('#tui-icon-color-picker')[0],
    color: '#000000'
});

var textColorpicker = tui.colorPicker.create({
    container: $('#tui-text-color-picker')[0],
    color: '#000000'
});

var brushColorpicker = tui.colorPicker.create({
    container: $('#tui-brush-color-picker')[0],
    color: '#000000'
});

var shapeColorpicker = tui.colorPicker.create({
    container: $('#tui-shape-color-picker')[0],
    color: '#000000'
});

// Create image editor
var imageEditor = new tui.ImageEditor('.tui-image-editor', {
    cssMaxWidth: document.documentElement.clientWidth,
    cssMaxHeight: document.documentElement.clientHeight,
    selectionStyle: {
        cornerSize: 50,
        rotatingPointOffset: 100
    }
});

var $displayingSubMenu, $displayingHiddenMenu;

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 getBrushSettings() {
    var brushWidth = $inputBrushWidthRange.val();
    var brushColor = brushColorpicker.getColor();

    return {
        width: brushWidth,
        color: hexToRGBa(brushColor, 0.5)
    };
}

function activateShapeMode() {
    imageEditor.stopDrawingMode();
}

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;

    $inputTextSizeRange.val(fontSize);
    textColorpicker.setColor(fontColor);
}

function setIconToolbar(obj) {
    var iconColor = obj.fill;

    iconColorpicker.setColor(iconColor);
}
function setImageToolbar(obj) {
    //var iconColor = obj.fill;
    return obj;
    //iconColorpicker.setColor(iconColor);
}

function setShapeToolbar(obj) {
    var strokeColor, fillColor, isTransparent;
    var colorType = $('[name="select-color-type"]:checked').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.strokeWith);
}

function showSubMenu(type) {
    var index;

    switch (type) {
        case 'shape':
            index = 3;
            break;
        case 'icon':
            index = 4;
            break;
        case 'text':
            index = 5;
            break;
        default:
            index = 0;
    }

    $displayingSubMenu.hide();
    $displayingHiddenMenu.hide();

    $displayingSubMenu = $menuButtons.eq(index).parent().find(submenuClass).show();
}

// Bind custom event of image editor
imageEditor.on({
    undoStackChanged: function(length) {
        if (length) {
            $btnUndo.removeClass('disabled');
        } else {
            $btnUndo.addClass('disabled');
        }
    },
    redoStackChanged: function(length) {
        if (length) {
            $btnRedo.removeClass('disabled');
        } else {
            $btnRedo.addClass('disabled');
        }
    },
    objectScaled: function(obj) {
        if (obj.type === 'text') {
            $inputTextSizeRange.val(obj.fontSize);
        }
    },
    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();
        }
    }
});

// Image editor controls action
$menuButtons.on('click', function() {
    $displayingSubMenu = $(this).parent().find(submenuClass).show();
    $displayingHiddenMenu = $(this).parent().find(hiddenmenuClass);
});

$submenuButtons.on('click', function() {
    $displayingHiddenMenu.hide();
    $displayingHiddenMenu = $(this).parent().find(hiddenmenuClass).show();
});

$btnShowMenu.on('click', function() {
    $displayingSubMenu.hide();
    $displayingHiddenMenu.hide();
    $msg.show();

    imageEditor.stopDrawingMode();
});

// Image load action
$inputImage.on('change', function(event) {
    var file;
    var img;
    var resolution;

    if (!supportingFileAPI) {
        alert('This browser does not support file-api');
    }

    file = event.target.files[0];

    if (file) {
        img = new Image();

        img.onload = function() {
            resolution = this.width * this.height;

            if (resolution <= MAX_RESOLUTION) {
                imageEditor.loadImageFromFile(file).then(() => {
                    imageEditor.clearUndoStack();
                });
            } else {
                alert('Loaded image\'s resolution is too large!\nRecommended resolution is 3264 * 2448!');
            }

            URL.revokeObjectURL(file);
        };

        img.src = URL.createObjectURL(file);
    }
});

// Undo action
$btnUndo.on('click', function() {
    if (!$(this).hasClass('disabled')) {
        imageEditor.undo();
    }
});

// Redo action
$btnRedo.on('click', function() {
    if (!$(this).hasClass('disabled')) {
        imageEditor.redo();
    }
});

// Remove active object action
$btnRemoveActiveObject.on('click', function() {
    imageEditor.removeObject(activeObjectId);
});

// Download action
$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 + '>';
    }
});

// Crop menu action
$btnCrop.on('click', function() {
    imageEditor.startDrawingMode('CROPPER');
});

$btnApplyCrop.on('click', function() {
    imageEditor.crop(imageEditor.getCropzoneRect()).then(() => {
        imageEditor.stopDrawingMode();
        $subMenus.removeClass('show');
        $hiddenMenus.removeClass('show');
    });
});

// Orientation menu action
$btnRotateClockwise.on('click', function() {
    imageEditor.rotate(90);
});

$btnRotateCounterClockWise.on('click', function() {
    imageEditor.rotate(-90);
});

$btnFlipX.on('click', function() {
    imageEditor.flipX();
});

$btnFlipY.on('click', function() {
    imageEditor.flipY();
});

// Icon menu action
$btnAddArrowIcon.on('click', function() {
    imageEditor.addIcon('arrow');
});

$btnAddCancelIcon.on('click', function() {
    imageEditor.addIcon('cancel');
});

$btnAddCustomIcon.on('click', function() {
    imageEditor.addIcon('customArrow');
});

$btnAddImageShade.on('click', function() {
    imageEditor.addImageObject('img/shade1.png');
});

iconColorpicker.on('selectColor', function(event) {
    imageEditor.changeIconColor(activeObjectId, event.color);
});

// Text menu action
$btnAddText.on('click', function() {
    var initText = 'DoubleClick';

    imageEditor.startDrawingMode('TEXT');
    imageEditor.addText(initText, {
        styles: {
            fontSize: parseInt($inputTextSizeRange.val(), 10)
        }
    });
});

$btnChangeTextStyle.on('click', function() {
    var styleType = $(this).attr('data-style-type');
    var styleObj = {};
    var styleObjKey;

    switch (styleType) {
        case 'bold':
            styleObjKey = 'fontWeight';
            break;
        case 'italic':
            styleObjKey = 'fontStyle';
            break;
        case 'underline':
            styleObjKey = 'underline';
            break;
        case 'left':
            styleObjKey = 'textAlign';
            break;
        case 'center':
            styleObjKey = 'textAlign';
            break;
        case 'right':
            styleObjKey = 'textAlign';
            break;
        default:
            styleObjKey = '';
    }

    styleObj[styleObjKey] = styleType;

    imageEditor.changeTextStyle(activeObjectId, styleObj);
});

$inputTextSizeRange.on('change', function() {
    imageEditor.changeTextStyle(activeObjectId, {
        fontSize: parseInt($(this).val(), 10)
    });
});

textColorpicker.on('selectColor', function(event) {
    imageEditor.changeTextStyle(activeObjectId, {
        fill: event.color
    });
});

// Draw line menu action
$btnFreeDrawing.on('click', function() {
    var settings = getBrushSettings();

    imageEditor.stopDrawingMode();
    imageEditor.startDrawingMode('FREE_DRAWING', settings);
});

$btnLineDrawing.on('click', function() {
    var settings = getBrushSettings();

    imageEditor.stopDrawingMode();
    imageEditor.startDrawingMode('LINE_DRAWING', settings);
});

$inputBrushWidthRange.on('change', function() {
    imageEditor.setBrush({
        width: parseInt($(this).val(), 10)
    });
});

brushColorpicker.on('selectColor', function(event) {
    imageEditor.setBrush({
        color: hexToRGBa(event.color, 0.5)
    });
});

// Add shape menu action
$btnAddRect.on('click', function() {
    imageEditor.addShape('rect', tui.util.extend({
        width: 500,
        height: 300
    }, shapeOpt));
});

$btnAddSquare.on('click', function() {
    imageEditor.addShape('rect', tui.util.extend({
        width: 400,
        height: 400,
        isRegular: true
    }, shapeOpt));
});

$btnAddEllipse.on('click', function() {
    imageEditor.addShape('circle', tui.util.extend({
        rx: 300,
        ry: 200
    }, shapeOpt));
});

$btnAddCircle.on('click', function() {
    imageEditor.addShape('circle', tui.util.extend({
        rx: 200,
        ry: 200,
        isRegular: true
    }, shapeOpt));
});

$btnAddTriangle.on('click', function() {
    imageEditor.addShape('triangle', tui.util.extend({
        width: 500,
        height: 400,
        isRegular: true
    }, shapeOpt));
});

$inputStrokeWidthRange.on('change', function() {
    imageEditor.changeShape(activeObjectId, {
        strokeWidth: parseInt($(this).val(), 10)
    });
});

$inputCheckTransparent.on('change', function() {
    var colorType = $('[name="select-color-type"]:checked').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
        });
    }
});

shapeColorpicker.on('selectColor', function(event) {
    var colorType = $('[name="select-color-type"]:checked').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
        });
    }
});

// Load sample image
imageEditor.loadImageFromURL('https://editor.studysciences.com/img/sampleImage.jpg', 'SampleImage').then(() => {
    imageEditor.clearUndoStack();
});
<meta name="viewport" content="width=device-width, user-scalable=no">
<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet">
<link type="text/css" href="https://editor.studysciences.com/css/service-mobile.css" rel="stylesheet">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>
  <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
  <script src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
  <script type="text/javascript" src="https://editor.studysciences.com/js/tui-image-editor.js"></script>
  <!-- Image editor controls - top area -->
  <div class="header">
    <div>
      <span class="name">ImageEditor</span>
    </div>
    <div class="menu">
      <span class="button">
      <img src="https://editor.studysciences.com/img/openImage.png" style="margin-top: 5px;" />
                    <input type="file" accept="image/*" id="input-image-file">
                </span>
      <button class="button disabled" id="btn-undo"><img src="https://editor.studysciences.com/img/undo.png" /></button>
      <button class="button disabled" id="btn-redo"><img src="https://editor.studysciences.com/img/redo.png" /></button>
      <button class="button" id="btn-remove-active-object"><img src="https://editor.studysciences.com/img/remove.png" /></button>
      <button class="button" id="btn-download"><img src="https://editor.studysciences.com/img/download.png" /></button>
    </div>
  </div>
  <!-- Image editor area -->
  <div class="tui-image-editor"></div>
  <!-- Image editor controls - bottom area -->
  <div class="tui-image-editor-controls">
    <ul class="scrollable">
      <li class="menu-item">
        <button class="menu-button" id="btn-crop">Crop</button>
        <div class="submenu">
          <button class="btn-prev">&lt;</button>
          <ul class="scrollable">
            <li class="menu-item"><button class="submenu-button" id="btn-apply-crop">Apply</button></li>
          </ul>
        </div>
      </li>
      <li class="menu-item">
        <button class="menu-button">Orientation</button>
        <div class="submenu">
          <button class="btn-prev">&lt;</button>
          <ul class="scrollable">
            <li class="menu-item"><button class="submenu-button" id="btn-rotate-clockwise">Rotate +90</button></li>
            <li class="menu-item"><button class="submenu-button" id="btn-rotate-counter-clockwise">Rotate -90</button></li>
            <li class="menu-item"><button class="submenu-button" id="btn-flip-x">FilpX</button></li>
            <li class="menu-item"><button class="submenu-button" id="btn-flip-y">FilpY</button></li>
          </ul>
        </div>
      </li>
      <li class="menu-item">
        <button class="menu-button" id="btn-draw-line">Drawing</button>
        <div class="submenu">
          <button class="btn-prev">&lt;</button>
          <ul class="scrollable">
            <li class="menu-item">
              <button class="submenu-button" id="btn-free-drawing">Free<br>Drawing</button>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-line-drawing">Line<br>Drawing</button>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-change-size">Brush<br>Size</button>
              <div class="hiddenmenu">
                <input id="input-brush-range" type="range" min="10" max="100" value="50" />
              </div>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-change-text-color">Brush<br>Color</button>
              <div class="hiddenmenu">
                <div id="tui-brush-color-picker"></div>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li class="menu-item">
        <button class="menu-button" id="btn-draw-shape">Shape</button>
        <div class="submenu">
          <button class="btn-prev">&lt;</button>
          <ul class="scrollable">
            <li class="menu-item">
              <button class="submenu-button" id="btn-add-rect">Rectagle</button>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-add-square">Square</button>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-add-ellipse">Ellipse</button>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-add-circle">Circle</button>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-add-triangle">Triangle</button>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-stroke-size">Stroke<br>Size</button>
              <div class="hiddenmenu">
                <input id="input-stroke-range" type="range" min="1" max="100" value="10" />
              </div>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-change-shape-color">Color</button>
              <div class="hiddenmenu">
                <div class="top">
                  <label for="fill-color"><input type="radio" id="fill-color" name="select-color-type" value="fill" checked="checked" /> Fill</label>
                  <label for="stroke-color"><input type="radio" id="stroke-color" name="select-color-type" value="stroke" /> Stroke</label>
                  <label for="input-check-transparent"><input type="checkbox" id="input-check-transparent">Transparent</label>
                </div>
                <div id="tui-shape-color-picker"></div>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li class="menu-item">
        <button class="menu-button">Icon</button>
        <div class="submenu">
          <button class="btn-prev">&lt;</button>
          <ul class="scrollable">
            <li class="menu-item"><button class="submenu-button" id="btn-add-arrow-icon">Arrow<br>Icon</button></li>
            <li class="menu-item"><button class="submenu-button" id="btn-add-cancel-icon">Cancel<br>Icon</button></li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-change-icon-color">Color</button>
              <div class="hiddenmenu">
                <div id="tui-icon-color-picker"></div>
              </div>
            </li>
          </ul>
        </div>
      </li>
      <li class="menu-item">
        <button class="menu-button" id="btn-add-text">Text</button>
        <div class="submenu">
          <button class="btn-prev">&lt;</button>
          <ul class="scrollable">
            <li class="menu-item">
              <button class="submenu-button" id="btn-change-size">Size</button>
              <div class="hiddenmenu">
                <input id="input-text-size-range" type="range" min="10" max="240" value="120">
              </div>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-change-style">Style</button>
              <div class="hiddenmenu">
                <button class="hiddenmenu-button btn-change-text-style" data-style-type="bold"><b>Bold</b></button>
                <button class="hiddenmenu-button btn-change-text-style" data-style-type="italic"><i>Italic</i></button>
                <button class="hiddenmenu-button btn-change-text-style" data-style-type="underline"><u>Underline</u></button>
              </div>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-change-align">Align</button>
              <div class="hiddenmenu">
                <button class="hiddenmenu-button btn-change-text-style" data-style-type="left">Left</button>
                <button class="hiddenmenu-button btn-change-text-style" data-style-type="center">Center</button>
                <button class="hiddenmenu-button btn-change-text-style" data-style-type="right">Right</button>
              </div>
            </li>
            <li class="menu-item">
              <button class="submenu-button" id="btn-change-text-color">Color</button>
              <div class="hiddenmenu">
                <div id="tui-text-color-picker"></div>
              </div>
            </li>
          </ul>
        </div>
        <button class="submenu-button" id="btn-add-image-shade">Image 1</button>
      </li>
    </ul>
    <p class="msg">Menu Scrolling <b>Left ⇔ Right</b></p>
  </div>

4

0 回答 0