修改toastui-image-editor的默认按钮旋转角度

因为项目中有需求但是在网上搜寻资料无果，官方似乎只提供了修改选择角度的方法，但是渲染的页面上的按钮旋转角度无法改变，思路是直接改造页面样式和绑定事件：
1.修改按钮下的文字

2.获取到两个按钮的dom对象，绑定上自己写的方法（需要阻止事件冒泡，按钮外层有一个监听事件，会动态修改横线条和度数框的值，不然会在你自定义旋转的角度上加默认30°）

3.联动横向条和输入框的值（因为输入框只能接收键盘上下键修改，所有直接使用键盘模拟的操作）

      var dom1 = document.getElementsByClassName('tui-image-editor-button clockwise')[0]
      dom1.getElementsByTagName('label')[0].innerText = '3'

      dom1.addEventListener('click', this.roateleft)

      var dom2 = document.getElementsByClassName('tui-image-editor-button counterclockwise')[0]
      dom2.getElementsByTagName('label')[0].innerText = '-3'

      dom2.addEventListener('click', this.roateRight)

	// 38 和40对于键盘上下键的keycode
    roateleft(e) {
      e.cancelBubble = true
      this.instance.rotate(3)
      this.customroate(38)
    },
    roateRight(e) {
      e.cancelBubble = true
      this.instance.rotate(-3)
      this.customroate(40) 
    },

 fireKeyEvent(el, evtType, keyCode) {
      var doc = el.ownerDocument
      var win = doc.defaultView || doc.parentWindow
      var evtObj
      if (doc.createEvent) {
        if (win.KeyEvent) {
          evtObj = doc.createEvent('KeyEvents')
          evtObj.initKeyEvent(evtType, true, true, win, false, false, false, false, keyCode, 0)
        } else {
          evtObj = doc.createEvent('UIEvents')
          Object.defineProperty(evtObj, 'keyCode', {
            get: function() { return this.keyCodeVal }
          })
          Object.defineProperty(evtObj, 'which', {
            get: function() { return this.keyCodeVal }
          })
          evtObj.initUIEvent(evtType, true, true, win, 1)
          evtObj.keyCodeVal = keyCode
          if (evtObj.keyCode !== keyCode) {
            console.log('keyCode ' + evtObj.keyCode + ' 和 (' + evtObj.which + ') 不匹配')
          }
        }
        el.dispatchEvent(evtObj)
      } else if (doc.createEventObject) {
        evtObj = doc.createEventObject()
        evtObj.keyCode = keyCode
        el.fireEvent('on' + evtType, evtObj)
      }
    }

模拟键盘操作参考链接

完整代码（需要elementui插件）：

<template>
  <div>
    <el-dialog ref="dialog" :visible.sync="dialogVisible" custom-class="cust" @close="isEditing=false">
      <div id="toastui-image-editor" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePic">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import 'tui-image-editor/dist/tui-image-editor.css'
import 'tui-color-picker/dist/tui-color-picker.css'
const ImageEditor = require('tui-image-editor')
const localeZh = {
  // override default English locale to your custom
  Crop: '裁剪',
  ZoomIn: '放大',
  ZoomOut: '缩小',
  Hand: '拖拽',
  History: '历史记录',
  DeleteAll: '全部删除',
  Delete: '删除',
  Undo: '撤销',
  Redo: '反撤销',
  Reset: '重置',
  Flip: '镜像',
  Rotate: '旋转',
  Draw: '画',
  Shape: '形状标注',
  Icon: '图标标注',
  Text: '文字标注',
  Mask: '遮罩',
  Filter: '滤镜',
  Bold: '加粗',
  Italic: '斜体',
  Underline: '下划线',
  Left: '左对齐',
  Center: '居中',
  Right: '右对齐',
  Color: '颜色',
  'Text size': '字体大小',
  Custom: '自定义',
  Square: '正方形',
  Apply: '应用',
  Cancel: '取消',
  'Flip X': 'X 轴',
  'Flip Y': 'Y 轴',
  Range: '区间',
  Stroke: '描边',
  Fill: '填充',
  Circle: '圆',
  Triangle: '三角',
  Rectangle: '矩形',
  Free: '曲线',
  Straight: '直线',
  Arrow: '箭头',
  'Arrow-2': '箭头2',
  'Arrow-3': '箭头3',
  'Star-1': '星星1',
  'Star-2': '星星2',
  Polygon: '多边形',
  Location: '定位',
  Heart: '心形',
  Bubble: '气泡',
  'Custom icon': '自定义图标',
  'Load Mask Image': '加载蒙层图片',
  Grayscale: '灰度',
  Blur: '模糊',
  Sharpen: '锐化',
  Emboss: '浮雕',
  'Remove White': '除去白色',
  Distance: '距离',
  Brightness: '亮度',
  Noise: '噪音',
  'Color Filter': '彩色滤镜',
  Sepia: '棕色',
  Sepia2: '棕色2',
  Invert: '负片',
  Pixelate: '像素化',
  Threshold: '阈值',
  Tint: '色调',
  Multiply: '正片叠底',
  Blend: '混合色'
  // etc...
}

const customTheme = {
  'common.bi.image': '', // 在这里换上你喜欢的logo图片
  'common.bi.display': 'none',
  // 'common.bisize.width': '0px',
  // 'common.bisize.height': '0px',
  // 'common.backgroundImage': 'none',
  // 'common.backgroundColor': '#f3f4f6',
  // 'common.border': '1px solid #444',

  'header.backgroundImage': 'none',
  'header.backgroundColor': '#f3f4f6',
  'header.border': '0px',
  'header.display': 'none',

  // load button
  'loadButton.backgroundColor': '#fff',
  'loadButton.border': '1px solid #ddd',
  'loadButton.color': '#222',
  'loadButton.fontFamily': 'NotoSans, sans-serif',
  'loadButton.fontSize': '12px',
  'loadButton.display': 'none', // 可以直接隐藏掉

  // download button
  'downloadButton.backgroundColor': '#fdba3b',
  'downloadButton.border': '1px solid #fdba3b',
  'downloadButton.color': '#fff',
  'downloadButton.fontFamily': 'NotoSans, sans-serif',
  'downloadButton.fontSize': '12px',
  'downloadButton.display': 'none' // 可以直接隐藏掉

}
export default {
  data() {
    return {
      instance: null,
      dialogVisible: false,
      url: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    fireKeyEvent(el, evtType, keyCode) {
      var doc = el.ownerDocument
      var win = doc.defaultView || doc.parentWindow
      var evtObj
      if (doc.createEvent) {
        if (win.KeyEvent) {
          evtObj = doc.createEvent('KeyEvents')
          evtObj.initKeyEvent(evtType, true, true, win, false, false, false, false, keyCode, 0)
        } else {
          evtObj = doc.createEvent('UIEvents')
          Object.defineProperty(evtObj, 'keyCode', {
            get: function() { return this.keyCodeVal }
          })
          Object.defineProperty(evtObj, 'which', {
            get: function() { return this.keyCodeVal }
          })
          evtObj.initUIEvent(evtType, true, true, win, 1)
          evtObj.keyCodeVal = keyCode
          if (evtObj.keyCode !== keyCode) {
            console.log('keyCode ' + evtObj.keyCode + ' 和 (' + evtObj.which + ') 不匹配')
          }
        }
        el.dispatchEvent(evtObj)
      } else if (doc.createEventObject) {
        evtObj = doc.createEventObject()
        evtObj.keyCode = keyCode
        el.fireEvent('on' + evtType, evtObj)
      }
    },
    roateleft(e) {
      e.cancelBubble = true
      this.instance.rotate(3)
      this.customroate(38)
    },
    roateRight(e) {
      e.cancelBubble = true
      this.instance.rotate(-3)
      this.customroate(40)
    },
    customroate(keycode) {
      var dom = document.getElementsByClassName('tui-image-editor-submenu')[0].getElementsByClassName('tui-image-editor-menu-rotate')[0]
        .getElementsByClassName('tui-image-editor-submenu-item')[0].getElementsByClassName('tui-image-editor-newline')[0]
        .getElementsByTagName('input')[0]

      this.fireKeyEvent(dom, 'keydown', keycode)
      this.fireKeyEvent(dom, 'keydown', keycode)
      this.fireKeyEvent(dom, 'keydown', keycode)
    },
    savePic() {
      const base64String = this.instance.toDataURL()
      this.$emit('save', base64String)
    },

    setPic(url) {
      this.instance.loadImageFromURL(url, 'lena').then(result => {
        console.log('old : ' + result.oldWidth + ', ' + result.oldHeight)
        console.log('new : ' + result.newWidth + ', ' + result.newHeight)
      })

      var dom1 = document.getElementsByClassName('tui-image-editor-button clockwise')[0]
      dom1.getElementsByTagName('label')[0].innerText = '3'

      dom1.addEventListener('click', this.roateleft)

      var dom2 = document.getElementsByClassName('tui-image-editor-button counterclockwise')[0]
      dom2.getElementsByTagName('label')[0].innerText = '-3'

      dom2.addEventListener('click', this.roateRight)
    },
    init() {
      this.$nextTick(() => {
        this.instance = new ImageEditor(
          document.querySelector('#toastui-image-editor'),
          {
            includeUI: { // 表示使用它内置的 UI 控件
              loadImage: {
                path: 'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image', // 照片路径
                // path: , // 照片路径
                name: 'aa' // 图片名称
              }, // 默认加载的图片
              initMenu: 'rotate', // 表示编辑器加载后，第一个被选中的操作菜单功能
              menu: [
                'crop', // 裁切
                'flip', // 翻转
                'rotate', // 旋转
                'draw', // 添加绘画
                'shape', // 添加形状
                'icon', // 添加图标
                'text', // 添加文本
                'mask', // 添加覆盖
                'filter' // 添加滤镜
              ], // 支持的菜单
              locale: localeZh, // 国际化对照字段
              theme: customTheme, // 自定义的主题配置
              usageStatistics: false,
              menuBarPosition: 'left'// 菜单位置栏的位置，有四个选项可选：'top', 'bottom', 'left', 'right'
            },
            cssMaxWidth: 1200, // 编辑器 Canvas 的最大宽度
            cssMaxHeight: 700, // 编辑器 Canvas 的最大高度
            selectionStyle: {
              cornerSize: 5,
              rotatingPointOffset: 70
            }
          })
      })
    }
  }
}
</script>

<style scoped>
>>>.tui-image-editor-main{
  top: 0;
}
>>>.cust{
  margin-top: 20px !important;
  height: 900px;
  width: 1500px;
}
>>>.tui-image-editor-container{
  min-height: 770px !important;
}
>>>.tui-image-editor-submenu{
  width: 170px !important;
}
>>>.el-dialog__header{
  height: 40px;
}
>>>.tui-image-editor{
  left: 0 !important;
}
>>>.el-dialog__body{
  /*padding-top: 20px;*/
  padding-bottom: 10px;
}
>>>.el-dialog__footer{
  padding: 0;
}
#toastui-image-editor{
  width: 100%;
  height: 100%;
}

</style>