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

Question

我正在尝试调整此图像编辑器，使其具有预先确定的画布大小，并且不会根据加载的图像的分辨率改变大小。我希望它有 300 像素的宽度和 90 像素的高度......

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.

即使我上传 1800 像素 x 2000 像素的图片，这些尺寸也保持不变。

我使用这段代码来初始化组件：

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
  }
});

有没有人知道如何做到这一点？

Answer 1

经过几次测试，我以这种方式解决了它，绝对不是最好的方法，但目前它对我来说效果很好，我发布了一个答案，我不知道它是否可以帮助某人，或者只是给出想法.. .

我这样初始化组件：

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, 0, 0, _width, _hight, offsetX, offsetY);

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

  } catch (error) {
    errori_inSave = true
  }

}


/**
 * By Ken Fyrstenberg Nilsen
 *
 * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]])
 *
 * If image and context are only arguments rectangle will equal canvas
 */
function drawImageProp(ctx, img, x, y, w, h, offsetX, 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, cy, cw, ch, x, y, w, h);
}

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