ToastUI图像编辑器-根据容器调整图像大小

如何解决ToastUI图像编辑器-根据容器调整图像大小

我正在尝试修改此图像编辑器，以使其具有画布的预定大小，并且不会根据加载的图像的分辨率更改大小。我希望它的宽度为300px，高度为90px ...

I would like this size to always remain the same,and the image that is loaded,if anything,is cropped,but the size at download will always remain an image of 300px x 90px.

并且即使我上传了1800px x 2000px的图像，这些尺寸也保持不变。

我使用以下代码初始化组件：

imageEditor = new tui.ImageEditor('#tui-image-editor-container',{
  includeUI: {
    loadImage: {
      path: 'img/wallpaper.png',name: 'wallpaper'
    },theme: blackTheme,// or whiteTheme 
    menu: ['crop','flip','rotate','draw','shape','icon','text','mask','filter'],initMenu: 'filter',imageSize: {
      oldWidth: "0",oldHeight: "0",newWidth: "300",newHeight: "90"
    },uiSize: {
      width: '100%',height: '500px'
    },menuBarPosition: 'bottom'
  },cssMaxWidth: 300,cssMaxHeight: 90,selectionStyle: {
    cornerSize: 5,rotatingPointOffset: 70
  }
});

有人知道如何实现吗？

解决方法

经过几次测试后，我以这种方式解决了该问题，这绝对不是最好的方法，但就目前而言，它对我来说效果很好，我发布了答案，但我不知道它是否可以帮助某人，或者只是提出想法。

我像这样初始化组件：

imageEditor = new tui.ImageEditor('#UBY_tui-image-editor-container',{
    includeUI: {
      loadImage: {
        path: 'img/wallpaper.png',name: 'wallpaper'
      },theme: blackTheme,// or whiteTheme 
      menu: ['crop','flip','rotate','draw','shape','icon','text','mask','filter'],initMenu: 'filter',uiSize: {
        width: '100%',height: '400px'
      },menuBarPosition: 'bottom'
    },selectionStyle: {
      cornerSize: 5,rotatingPointOffset: 70
    }
});

对.css进行如下更改：

.tui-image-editor {
  width: 300px;
  height: 90px;
  overflow: hidden;
}

.tui-image-editor-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 300px;
  height: 100%;
  position: relative;
  background-color: #282828;
  overflow: hidden;
  letter-spacing: 0.3px;
}

但是，所有这些仍然无法解决我将图像保存在确定的尺寸中的问题，因此，在保存图像时，我执行了以下操作...我调用此函数来生成新的画布，然后保存所需尺寸的图片：

function uby_resize_imageEditor(_this,_width,_hight,callback) {

  try {
    var tempCanvas = document.createElement("CANVAS") 
    tempCanvas.width = _width;
    tempCanvas.height = _hight;
    var ctx = tempCanvas.getContext('2d');
    var img = new Image();
    img.src = _this;
    img.onload = function () {

      var offsetX = 0.5; // center x
      var offsetY = 0.5; // center y
      drawImageProp(ctx,img,offsetX,offsetY);

      var dataURL = tempCanvas.toDataURL();
      callback(dataURL)
    };

  } catch (error) {
    errori_inSave = true
  }

}


/**
 * By Ken Fyrstenberg Nilsen
 *
 * drawImageProp(context,image [,x,y,width,height [,offsetY]])
 *
 * If image and context are only arguments rectangle will equal canvas
 */
function drawImageProp(ctx,w,h,offsetY) {

  if (arguments.length === 2) {
    x = y = 0;
    w = ctx.canvas.width;
    h = ctx.canvas.height;
  }

  // default offset is center
  offsetX = typeof offsetX === "number" ? offsetX : 0.5;
  offsetY = typeof offsetY === "number" ? offsetY : 0.5;

  // keep bounds [0.0,1.0]
  if (offsetX < 0) offsetX = 0;
  if (offsetY < 0) offsetY = 0;
  if (offsetX > 1) offsetX = 1;
  if (offsetY > 1) offsetY = 1;

  var iw = img.width,ih = img.height,r = Math.min(w / iw,h / ih),nw = iw * r,// new prop. width
    nh = ih * r,// new prop. height
    cx,cy,cw,ch,ar = 1;

  // decide which gap to fill    
  if (nw < w) ar = w / nw;
  if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated
  nw *= ar;
  nh *= ar;

  // calc source rectangle
  cw = iw / (nw / w);
  ch = ih / (nh / h);

  cx = (iw - cw) * offsetX;
  cy = (ih - ch) * offsetY;

  // make sure source rectangle is valid
  if (cx < 0) cx = 0;
  if (cy < 0) cy = 0;
  if (cw > iw) cw = iw;
  if (ch > ih) ch = ih;

  // fill image in dest. rectangle
  ctx.drawImage(img,cx,h);
}

希望这可以帮助有此问题的人。