ToastUI Image Editor - resize the images according to the container

Question

I'm trying to adapt this image editor, so that it has a predetermined size of the canvas and that it doesn't change size according to the resolution of the image that is loaded. I wish it had a width of 300px and a height of 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.

and that these dimensions remain the same even if I upload an image of 1800px x 2000px.

I use this code to initialize the component:

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

Is there anyone who knows how this can be achieved?

Answer 1

After several tests I solved it in this way, definitely not the best way but for the moment it works well for me, I publish an answer, I don't know maybe it can help someone, or simply give ideas ...

I initialized the component like this:

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

A small change to the .css like this:

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

all this, however, still does not solve my problem of saving the image in the established dimensions, and therefore when saving the image, I did these operations ... I call this function to generate a new canvas and then save the image with the desired size:

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

hope this can help someone who has this problem.