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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0