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