0

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

我希望这个大小始终保持不变，并且加载的图像（如果有的话）被裁剪，但下载时的大小将始终保持为 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
  }
});

有谁知道如何实现这一目标？

4

1 回答 1

0

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

我像这样初始化组件：

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

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

于 2020-10-03T09:29:30.027 回答