tui-image-editor实现图片编辑器代码

代码语言:html

所属分类:其他

代码描述:tui-image-editor实现图片编辑器代码,可打开本地图片进行编辑旋转滤镜变色添加文字形状裁剪等操作。

代码标签: tui-image-editor 图片 编辑器 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<meta
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
	name="viewport" />

<link type="text/css" rel="stylesheet"
	href="//img.bfw.wiki/static/Blog/css/bfw.css?1=4">




<script  type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fabric.js"></script>
  <script  type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tui-code-snippet.min.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tui-color-picker.min.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tui-image-editor.js"></script>
<link href="//repo.bfw.wiki/bfwrepo/css/tui-image-editor.css" rel="stylesheet">
<div class="bfw-pos-abs" style="height:100vh;width:100vw;z-index:999;top:0;left:0;line-height: 1em !important;">
<div id="tui-image-editor-container" style="height:100vh;"></div></div>

<script>

                var blackTheme = {
          
                    // main icons
                    'menu.normalIcon.path': '//repo.bfw.wiki/bfwrepo/image/svg/icon-d.svg',
                    'menu.activeIcon.path': '//repo.bfw.wiki/bfwrepo/image/svg/icon-b.svg',
                    'menu.disabledIcon.path': '//repo.bfw.wiki/bfwrepo/image/svg/icon-a.svg',
                    'menu.hoverIcon.path': '//repo.bfw.wiki/bfwrepo/image/svg/icon-c.svg',
                    // submenu icons
                    'submenu.normalIcon.path': '//repo.bfw.wiki/bfwrepo/image/svgg/icon-d.svg',
                    'submenu.activeIcon.path': '//repo.bfw.wiki/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': '绘.........完整代码请登录后点击上方下载按钮下载查看

网友评论0