import ImageEditor = require('tui-image-editor');
const blackTheme = {
'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
'common.bisize.width': '251px',
'common.bisize.height': '21px',
'common.backgroundImage': 'none',
'common.backgroundColor': '#1e1e1e',
'common.border': '0px',
// header
'header.backgroundImage': 'none',
'header.backgroundColor': 'transparent',
'header.border': '0px',
// load button
'loadButton.backgroundColor': '#fff',
'loadButton.border': '1px solid #ddd',
'loadButton.color': '#222',
'loadButton.fontFamily': 'NotoSans, sans-serif',
'loadButton.fontSize': '12px',
// download button
'downloadButton.backgroundColor': '#fdba3b',
'downloadButton.border': '1px solid #fdba3b',
'downloadButton.color': '#fff',
'downloadButton.fontFamily': 'NotoSans, sans-serif',
'downloadButton.fontSize': '12px',
// main icons
'menu.normalIcon.path': '../dist/svg/icon-b.svg',
'menu.normalIcon.name': 'icon-b',
'menu.activeIcon.path': '../dist/svg/icon-a.svg',
'menu.activeIcon.name': 'icon-a',
'menu.iconSize.width': '24px',
'menu.iconSize.height': '24px',
// submenu primary color
'submenu.backgroundColor': '#1e1e1e',
'submenu.partition.color': '#858585',
// submenu icons
'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
'submenu.normalIcon.name': 'icon-a',
'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
'submenu.activeIcon.name': 'icon-c',
'submenu.iconSize.width': '32px',
'submenu.iconSize.height': '32px',
// submenu labels
'submenu.normalLabel.color': '#858585',
'submenu.normalLabel.fontWeight': 'lighter',
'submenu.activeLabel.color': '#fff',
'submenu.activeLabel.fontWeight': 'lighter',
// checkbox style
'checkbox.border': '1px solid #ccc',
'checkbox.backgroundColor': '#fff',
// rango style
'range.pointer.color': '#fff',
'range.bar.color': '#666',
'range.subbar.color': '#d1d1d1',
'range.value.color': '#fff',
'range.value.fontWeight': 'lighter',
'range.value.fontSize': '11px',
'range.value.border': '1px solid #353535',
'range.value.backgroundColor': '#151515',
'range.title.color': '#fff',
'range.title.fontWeight': 'lighter',
// colorpicker style
'colorpicker.button.border': '1px solid #1e1e1e',
'colorpicker.title.color': '#fff'
};
const imageEditor = new ImageEditor('#container', {
includeUI: {
loadImage: {
path: 'img/sampleImage.jpg',
name: 'SampleImage'
},
theme: blackTheme,
menu: ['shape', 'filter'],
initMenu: 'filter',
uiSize: {
width: '1000px',
height: '700px'
},
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70
}
});
imageEditor.addIcon('arrow');
imageEditor.addIcon('cancel', {
left: 100,
top: 100
}).then(objectProps => {
console.log(objectProps.id);
});
imageEditor.addImageObject('path/fileName.jpg').then(objectProps => {
console.log(objectProps);
});
imageEditor.addShape('rect', {
fill: 'red',
stroke: 'blue',
strokeWidth: 3,
width: 100,
height: 200,
left: 10,
top: 10,
isRegular: true
});
imageEditor.addShape('circle', {
fill: 'red',
stroke: 'blue',
strokeWidth: 3,
rx: 10,
ry: 100,
isRegular: false
}).then(objectProps => {
console.log(objectProps.id);
});
imageEditor.addText('initText', {
styles: {
fill: '#000',
fontSize: 20,
fontWeight: 'bold'
},
position: {
x: 10,
y: 10
}
}).then(objectProps => {
console.log(objectProps.id);
});
imageEditor.applyFilter('Grayscale');
imageEditor.applyFilter('mask', {
maskObjId: 0
}).then(obj => {
console.log(`filterType: ${obj.type}`);
console.log(`actType: ${obj.action}`);
});
imageEditor.changeCursor('crosshair');
imageEditor.changeIconColor(0, '#000000');
imageEditor.changeSelectableAll(false);
imageEditor.changeShape(0, {
fill: 'red',
stroke: 'blue',
strokeWidth: 3,
rx: 10,
ry: 100
});
imageEditor.changeText(0, 'change text');
imageEditor.changeTextStyle(0, {
fontStyle: 'italic'
});
imageEditor.clearObjects();
imageEditor.clearRedoStack();
imageEditor.clearUndoStack();
imageEditor.crop(imageEditor.getCropzoneRect());
imageEditor.deactivateAll();
imageEditor.destroy();
imageEditor.discardSelection();
imageEditor.flipX().then(status => {
console.log(`flipX: ${status.flipX}`);
console.log(`flipY: ${status.flipY}`);
console.log(`angle: ${status.angle}`);
}).catch(message => {
console.log(`error: ${message}`);
});
imageEditor.flipY();
imageEditor.getCanvasSize();
imageEditor.getCropzoneRect();
imageEditor.getDrawingMode();
imageEditor.getImageName();
imageEditor.getObjectPosition(0, 'left', 'top');
imageEditor.getObjectProperties(0, 'left');
imageEditor.getObjectProperties(0, ['left', 'top', 'width', 'height']);
imageEditor.getObjectProperties(0, {
left: null,
top: null,
height: null,
opacity: null
});
imageEditor.hasFilter('filterType');
imageEditor.isEmptyRedoStack();
imageEditor.isEmptyUndoStack();
let fileObj: any;
imageEditor.loadImageFromFile(fileObj, 'SampleImage').then(result => {
console.log(`old: ${result.oldWidth}, ${result.oldHeight}`);
console.log(`new: ${result.newWidth}, ${result.newHeight}`);
});
imageEditor.loadImageFromURL('http://url/testImage.png', 'lena').then(result => {
console.log(`old: ${result.oldWidth}, ${result.oldHeight}`);
console.log(`new: ${result.newWidth}, ${result.newHeight}`);
});
imageEditor.redo();
imageEditor.registerIcons({
customIcon: 'M 0 0 L 20 20 L 10 10 Z',
customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z'
});
imageEditor.removeActiveObject();
imageEditor.removeFilter('Grayscale').then(obj => {
console.log(`filterType: ${obj.type}`);
console.log(`actType: ${obj.action}`);
}).catch(message => {
console.log(`error : ${message}`);
});
imageEditor.removeObject(0);
imageEditor.resetFlip().then(status => {
console.log(`filpX : ${status.flipX}`);
console.log(`flipY : ${status.flipY}`);
console.log(`angle : ${status.angle}`);
});
imageEditor.resizeCanvasDimension({
width: 300,
height: 300
});
imageEditor.rotate(10);
imageEditor.setAngle(45);
imageEditor.setBrush({
width: 12,
color: 'rgba(0, 0, 0, 0.5)'
});
imageEditor.setBrush({
width: 20,
color: '#FFFFFF'
});
imageEditor.setCropzoneRect(1/1);
imageEditor.setDrawingShape('rect', {
fill: 'red',
width: 100,
height: 200
});
imageEditor.setDrawingShape('circle', {
rx: 10,
ry: 10,
isRegular: true
});
imageEditor.setObjectPosition(0, {
x: 0,
y: 0,
originX: 'left',
originY: 'top'
});
imageEditor.setObjectProperties(0, {
left: 100,
top: 100,
width: 200,
height: 200,
opacity: 0.5
}).then(arg => {
console.log(arg);
});
imageEditor.setObjectPropertiesQuietly(0, {
left: 100,
top: 100,
width: 200,
height: 200,
opacity: 0.5
}).then(arg => {
console.log(arg);
});
imageEditor.startDrawingMode('FREE_DRWARING', {
width: 10,
color: 'rgba(255, 0, 0, 0.5)'
});
imageEditor.stopDrawingMode();
imageEditor.toDataURL();
imageEditor.undo();
imageEditor.on('addText', pos => {
imageEditor.addText('Double Click', {
position: pos.originPosition
});
console.log(`text position on canvas : ${pos.originPosition}`);
console.log(`text position on browser : ${pos.clientPosition}`);
});
|