Potente editor de imágenes basado en canvas-TUI. Image-Editor

Vista prévia

Descripción

TUI. Image-Editor es un editor de imágenes potente, personalizable, fácil de usar y móvil (con filtros de imagen) alimentado por JavaScript y HTML5 Canvas.

Basado en la biblioteca de canvas < a href = "https://github.com/fabricjs/fabric.js" target = "_ blank" rel = "noopener" > fabric. js .

Operations supported:

• Cultivo
• dar la vuelta
• Rotación
• Dibujo
• Forma
• Icono
• Texto
• Filtro de máscara
• Filtro de imagen
• Descargar
• Carga de imagen
• Deshacer
• Rehacer
• Restablecer
• Eliminar objeto

Filtro de imagens included:

• Grises
• Invertir
• Sepia
• Desenfoque de nitidez
• Realza
• RemoveWhite
• GradientTransparency
• Brillo
• Ruido
• Pixelar
• ColorFilter
• Tinte
• Multiplicar
• Mezcla

Funcionamiento

Instale el editor TUI. Image-con NPM.

# NPM
$ npm install tui.image-editor --save

O incluya los archivos necesarios de una red CDN.

<link rel="stylesheet" href="/path/to/tui-image-editor.css">
<script src="/path/to/tui-image-editor.js"></script>

Cree un elemento contenedor para el editor de imágenes.

<div id="tui-image-editor"></div>

Inicializar el editor de imágenes.

var ImageEditor = require('tui-image-editor');
var myEditor = new ImageEditor(document.querySelector('#tui-image-editor'), {


// optons here
});

Opciones de personalización para el editor de imágenes.

• includeUI : Use la interfaz de usuario proporcionada
• includeUI. loadImage : imagen de edición básica
• includeUI. loadImage. Path : ruta de la imagen
• includeUI.loadImage.name : nombre de la imagen
• includeUI. theme : objeto Theme
• includeUI. Menu : se puede seleccionar cuando solo se utiliza un menú específico. [default All]
• includeUI. initMenu : el primer menú que se selecciona y se inicia.
• includeUI. menuBarPosition : posición de la barra de menú [superior | inferior | izquierda | derecha]
• cssMaxWidth : lienzo CSS-Max-width
• cssMaxHeight : lienzo CSS-Max-height
• usageStatistics : háganos saber el nombre de host. Si no desea enviar el nombre de host, por favor, establezca en false.

var myEditor = new ImageEditor(document.querySelector('#tui-image-editor'), {


includeUI: {



loadImage: {




path: 'img/sampleImage.jpg',




 name: 'SampleImage'



},



theme: blackTheme, // or whiteTheme



menu: ['shape', 'filter'],



initMenu: 'filter',



menuBarPosition: 'bottom'


},


cssMaxWidth: 700,


cssMaxHeight: 500,


selectionStyle: {



cornerSize: 20,



rotatingPointOffset: 70


}
});