tui-image-editor.js 一款媲美ps的图片处理js插件，包含滤镜、遮罩、混合、模糊、添加文字、添加图形、画笔、裁剪、翻转等-BFW插件库

tui-image-editor.js 一款媲美ps的图片处理js插件，包含滤镜、遮罩、混合、模糊、添加文字、添加图形、画笔、裁剪、翻转等

tui-image-editor.js 一款媲美ps的图片处理js插件，包含滤镜、遮罩、混合、模糊、添加文字、添加图形、画笔、裁剪、翻转等，功能很强大，本人已经将其汉化，供大家学习使用

第一步引入bfwone 加载依赖项jquery.17|fabric|tui-code-snippet.min|tui-color-picker.min

第二步执行插件代码

示例如下，可直接在线运行编辑

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|fabric|tui-code-snippet.min|tui-color-picker.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["tui-image-editor", "tui-image-editor"], function() {

                const blackTheme = {
          
                    // main icons
                    'menu.normalIcon.path': '/bfwrepo/image/svg/icon-d.svg',
                    'menu.activeIcon.path': '/bfwrepo/image/svg/icon-b.svg',
                    'menu.disabledIcon.path': '/bfwrepo/image/svg/icon-a.svg',
                    'menu.hoverIcon.path': '/bfwrepo/image/svg/icon-c.svg',
                    // submenu icons
                    'submenu.normalIcon.path': '/bfwrepo/image/svgg/icon-d.svg',
                    'submenu.activeIcon.path': '/bfwrepo/image/svg/icon-c.svg',
                };
                var locale_ru_ZH = {
                    // override default English locale to your custom
                    'Crop': '裁剪',
                    'Delete': '删除',
                    'Delete-all': '删除所有',
                    "Load": "选择图片",
                    'Download': '下载图片',
                    'Sharpen': '锐化',
                    'Emboss': '浮雕',
                    'Blur': '模糊',
                    'Sepia': '深褐色',
                    'Sepia2': '深褐色2',
                    'Invert': '反色',
                    'Grayscale': '灰度化',
                    'Remove White': '移除白色',
                    'Threshold': '阈值',
                    'Distance': '距离',
                    'Filter': '滤镜',
                    'Color Filter': '颜色滤镜',
                    'Pixelate': '像素化',
                    'Noise': '噪点',
                    'Brightness': '亮度',
                    'Redo': '重做',
                    'Undo': '撤销',
                    'Reset': '重设',
                    'Flip': '翻转',
                    'Rotate': '旋转',
                    'Draw': '绘画',
                    'Shape': '图形',
                    'Icon': '图标',
                    'Text': '文字',
                    'Mask': '遮罩',
                    'Apply': '应用',
                    'Cancel': '取消',
                    'Custom': '自定义',
                    'Square': '正方形',
                    'Load Mask Image': '选择遮罩图片',
                    'Range': '角度',
                    'Color': '颜色',
                    'Fill': '填充',
                    'Stroke': '边框',
                    'Rectangle': '长方形',
                    'Circle': '圆形',
                    'Triangle': '三角形',
                    'Bold': '加粗',
                    'Italic': '倾斜',
                    'Underline': '下横线',
                    'Left': '左对齐',
                    'Center': '居中',
                    'Right': '右对齐',
                    'Text size': '文本大小',
                    'Arrow': '箭头',
                    'Arrow-2': '箭头2',
                    'Arrow-3': '箭头3',
                    'Value': '值',
                    'Custom icon': '自定义图标',
                    'Gradient transparency': '渐变透明',
                    'Blend': '混合',
                    'Multiply': '叠加',
                    'Tint': '色调',
                    'Heart': '心',
                    'Bubble': '泡泡',
                    'Location': '位置',
                    'Polygon': '多变形',
                    'Star-1': '星星1',
                    'Star-2': '星星2',
                    'Free': '自由',
                    'Straight': '直线',
                    // etc...
                };
                //  var blackTheme = require('./js/theme/black-theme.js');
                // Image editor
                var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {

                    includeUI: {
                        loadImage: {
                            path: 'http://editor.bfw.wiki/bfwrepo/image/demoimg.jpg',
                            name: '示例照片'
                        },
                        locale: locale_ru_ZH,
                        theme: blackTheme,
                        initMenu: 'filter',
                        menuBarPosition: 'left'
                    },
                    cssMaxWidth: 700,
                    cssMaxHeight: 500
                });

                window.onresize = function() {
                    imageEditor.ui.resizeEditor();
                }
            });
        });
    </script>
</head>
<body>

    <div id="tui-image-editor-container"></div>
</body>
</html>