Giter VIP home page Giter VIP logo

Comments (16)

Dipak26 avatar Dipak26 commented on May 18, 2024 1

Thanks

from tui.image-editor.

dongsik-yoo avatar dongsik-yoo commented on May 18, 2024

Hello, @Dipak26 .
What android/ios version do you use?

Mobile test environment

  • iOS 9.3.x
  • Android 4.4.x

from tui.image-editor.

Dipak26 avatar Dipak26 commented on May 18, 2024

Hello dongsik-yoo,
i used Android version > 5.0
and i build an Ionic-Angular cordova hybrid mobile application in which i used this code but it not work inside parital view in single page applicatiion the canvas div which you create using js is not in inspect element.
But when i try it on simple html page it work with mobile application so why it not work with ionic

from tui.image-editor.

Dipak26 avatar Dipak26 commented on May 18, 2024

the problem is with only canvas element you create the options are workable it opens file manager for choose image but canvas not shown in the mobile application I tried to inspect it in google chrome and got the result

but it work when i used it in main index.html page not in partial page.

from tui.image-editor.

dongsik-yoo avatar dongsik-yoo commented on May 18, 2024

Can you show me your angular component which is using ImageEditor?
Why don't you check new ImageEditor() in angular component lifecycle like link, compile etc. Maybe canvas div you create could be null in angular life cycle.

from tui.image-editor.

Dipak26 avatar Dipak26 commented on May 18, 2024

Actually, i loaded in it partial view and add all scripts in angular controller and i got

_selectedelement = null in tui-image-editor.js
when i try to log the value.
So i think that it have problem in partial page . can u please provide some solution. i will show you the code:
controller

angular.module('magecart.controllers').controller('PersonalizedProdCtrl', personalizedProdCtrl);

function personalizedProdCtrl($scope, $rootScope, $stateParams, UrlService, $http, $ionicLoading, $timeout) {

    $scope.$parent.loadScript('js/properso/tui-image-editor.js', 'text/javascript', 'utf-8'); 
  //gotslectedElement = null ;
    $scope.$parent.loadScript('js/properso/fabric.js', 'text/javascript', 'utf-8');
    $scope.$parent.loadScript('js/properso/FileSaver.min.js', 'text/javascript', 'utf-8');
    $scope.$parent.loadScript('js/properso/code-snippet.js', 'text/javascript', 'utf-8');
    $scope.$parent.loadScript('js/properso/colorpicker.min.js', 'text/javascript', 'utf-8');
    $scope.$parent.loadScript('js/properso/mobile.js', 'text/javascript', 'utf-8');

    $scope.product_data = $stateParams.productData;
    alert("123"+JSON.stringify($scope.product_data.media_gallery_entries));

}

partial view:

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>
            </li>
        </ul>
        <p class="msg">Menu Scrolling <b>Left ⇔ Right</b></p>
    </div>
</ion-content>

from tui.image-editor.

dongsik-yoo avatar dongsik-yoo commented on May 18, 2024

Could you give me initial code? It could be

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

Is mobile.js file in our example sources?

from tui.image-editor.

dongsik-yoo avatar dongsik-yoo commented on May 18, 2024

Do you have HTML below?

<!-- Image editor area -->
<div class="tui-image-editor"></div>

from tui.image-editor.

Dipak26 avatar Dipak26 commented on May 18, 2024

I will send you both file

mobile.js

/**

  • mobile.js
  • @author NHN Ent. FE Development Team [email protected]
  • @fileoverview
    /
    /     eslint-disable vars-on-top */
    'use strict';
    // alert("mobile.js");

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

var $btnLoadMaskImage = $('#input-mask-image-file');

// 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 $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.component.colorpicker.create({
container: $('#tui-icon-color-picker')[0],
color: '#000000'
});

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

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

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

// Create image editor
var imageEditor = new tui.component.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 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');
});

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 = 'textDecoration';
        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
    });
}

});

//Add Load Mask filter
$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);
        });
    });
}

});

// Load sample image
imageEditor.loadImageFromURL('img/sampleImage.jpg', 'SampleImage').then(() => {
imageEditor.clearUndoStack();
});

html code

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>
            </li>
        </ul>
        <p class="msg">Menu Scrolling <b>Left ⇔ Right</b></p>
    </div>
</ion-content>

from tui.image-editor.

Dipak26 avatar Dipak26 commented on May 18, 2024

Yes i have that div element in my ionic partial view.

from tui.image-editor.

dongsik-yoo avatar dongsik-yoo commented on May 18, 2024

What does DevTool say? Is there any script error?
You may need jquery, too.
Maybe initialization code will be executed in mobile.js. You can debug that lines in mobile.js.

// Create image editor
var imageEditor = new tui.component.ImageEditor('.tui-image-editor', {
.....

from tui.image-editor.

Dipak26 avatar Dipak26 commented on May 18, 2024

yes the jquery is load and try to log var imageEditor value but it not print but i get mobile.js in line

/**

  • mobile.js
  • @author NHN Ent. FE Development Team [email protected]
  • @fileoverview
    /
    /     eslint-disable vars-on-top */
    'use strict';
    alert("mobile.js"); // Alert

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

from tui.image-editor.

Dipak26 avatar Dipak26 commented on May 18, 2024

I got these errors in Chrome dev-tools

Uncaught TypeError: tui.component.ImageEditor is not a constructor
at mobile.js:94
tui-image-editor.js:5809 Uncaught ReferenceError: fabric is not defined
at Object. (tui-image-editor.js:5809)
at webpack_require (tui-image-editor.js:27)
at Object. (tui-image-editor.js:5413)
at webpack_require (tui-image-editor.js:27)
at Object. (tui-image-editor.js:3854)
at webpack_require (tui-image-editor.js:27)
at Object. (tui-image-editor.js:124)
at webpack_require (tui-image-editor.js:27)
at Object. (tui-image-editor.js:56)
at webpack_require (tui-image-editor.js:27)

here is the code of my controller for that view where i used it

angular.module('magecart.controllers').controller('PersonalizedProdCtrl', personalizedProdCtrl);

function personalizedProdCtrl($scope, $rootScope, $stateParams, UrlService, $http, $ionicLoading, $timeout) {
// $ionicLoading.show();
$scope.$on('$stateChangeSuccess', function () {
alert("456");
$scope.$parent.loadScript('js/properso/fabric.js', 'text/javascript', 'utf-8');
$scope.$parent.loadScript('js/properso/FileSaver.min.js', 'text/javascript', 'utf-8');
$scope.$parent.loadScript('js/properso/code-snippet.js', 'text/javascript', 'utf-8');
$scope.$parent.loadScript('js/properso/colorpicker.min.js', 'text/javascript', 'utf-8');
$scope.$parent.loadScript('js/properso/tui-image-editor.js', 'text/javascript', 'utf-8');
$scope.$parent.loadScript('js/properso/mobile.js', 'text/javascript', 'utf-8');
});

    $scope.product_data = $stateParams.productData;
    alert("123"+JSON.stringify($scope.product_data.media_gallery_entries));

}

from tui.image-editor.

dongsik-yoo avatar dongsik-yoo commented on May 18, 2024

fabric.js, tui-image-editor.js and other javascript files are not loaded. Please see loading script files is OK and check loading sequence.
If your $scope.$parent.loadScript function adds defer or async attribute to script tag, that's the problem.

from tui.image-editor.

Dipak26 avatar Dipak26 commented on May 18, 2024

ok, i want to load the other image you load bg.jpg default where I change it dynamically.

the problem solved all js load in index.html except mobile.js than the problem is solved .

Thanks

from tui.image-editor.

dongsik-yoo avatar dongsik-yoo commented on May 18, 2024

That sounds good.

You can dynamically load image by using loadImageFromURL(). Please refer API document and below sample code.

// Load sample image
imageEditor.loadImageFromURL('img/sampleImage.jpg', 'SampleImage').then(() => {
    imageEditor.clearUndoStack();
});

from tui.image-editor.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.