tui-image-editor 图片编辑功能

原文地址

在这基础上改了一点东西
主要是源码部分

if (menuBarPosition === 'bottom') {
     
  if (height > this._editorElementWrap.scrollHeight - 150) {
     
    // top = (height - this._editorElementWrap.scrollHeight) / 2;
    top = 0
  } else {
     
    // top = 150 / 2 * -1;
    top = 0
  }
} else if (menuBarPosition === 'top') {
     
  if (height > this._editorElementWrap.offsetHeight - 150) {
     
    // top = 150 / 2 - (height - (this._editorElementWrap.offsetHeight - 150)) / 2;
    top = 0
  } else {
     
    // top = 150 / 2;
    top = 0
  }
} 

这上面主要是针对点击底部编辑区域的图片会造成图片区域的top值变更，直接把一部分给顶没了，取消掉就可以了。

var defaultTextRangeValues = exports.defaultTextRangeValues = {
     
  realTimeEvent: true,
  min: 10,
  max: 200,
  value: 50
};

这上面是修改添加文字的大小区间跟默认值的

下面是你使用图片编辑的组件部分

// canvas区域不遮挡图片 只显示编辑区 
document.getElementsByClassName("tui-image-editor-main")[0].style.top = 50;
// canvas区域底部如果不加上这个，点击底部的功能按键，会遮挡图片，造成看不全，加上之后就可以了 
document.getElementsByClassName("lower-canvas")[0].style.paddingBottom = '160px';
// 隐藏删除按钮 留下全部删除就够了
document.getElementsByClassName('tie-btn-delete tui-image-editor-item help')[0].style.display = 'none'

好了，就这么多了，其他的可以看原文地址