Scale image to fit available area without its stretching #7155

i-prikot · 2021-06-24T17:18:41Z

i-prikot
Jun 24, 2021

Hi.

Example using CropX, CropY for an image that shows how to scale an image without its stretching. Can someone publish an example in the guide?

https://jsfiddle.net/i_prikot/pw7yhaLf/

ice-video-20210627-114443_xshoTVOo.mp4

melchiar · 2021-06-27T06:50:39Z

melchiar
Jun 27, 2021
Collaborator

Nice work, this is a great demo! Out of curiosity though, why no rotation control?

3 replies

i-prikot Jun 27, 2021
Author

Thanks!.
Really. I forgot about rotation control. Night writing code. ) Added rotation control to the example.

melchiar Jun 28, 2021
Collaborator

Very nice.

@asturur, do you think perhaps a native image cropping action like this would be a good addition to fabric.controlsUtils? While this is an excellent example of how to implement this behavior through subclassing, a demo might be more approachable if it were to show how to do this for the native image class by simply switching some of the control actions to another native function.

asturur Jul 3, 2021
Maintainer

i think cropping controls for examples would be nice, could also be available in the repo in an optional file ( not included in default build ) i do not want the library to become a 2MB monolith of JS.
I never published cropping controls for 2 reasons:

i developed at work and are not open source
i do not want all the app that adopt fabricjs to look identical

How you crop is UX and if you give people a ready crop with a decent UX and on the other side you ask them to understand the controls and write their own to improve the UX slightly, i bet most of developers would take the shortcut.

Cropping was the very reason while i developed the controls api with @r-a-c-h-e-l because we needed 12 controls instead of the classic 9 just to make an example.

Said so, yes in their own file have a ready made cropping controls or controls action only would be totally fine.

abhimanyu1990 · 2023-11-28T05:47:33Z

abhimanyu1990
Nov 28, 2023

Hi,

I am trying to apply the crop on already cropped and scaled image. But the image cropping is not applied to previous state.


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image crop</title>
  <script src="https://unpkg.com/fabric@latest/dist/fabric.js"></script>
</head>
<body>
  <canvas id="canvas" width="1200" height="700"></canvas>
  <!-- <script src="app.js"></script> -->
</body>
<script>




  fabric.Object.prototype.cornerStyle = "circle";
  fabric.util.requestAnimFrame(render);
  const canvas = new fabric.Canvas("canvas");

  let aspectRatioHorizontal;
  let aspectRatioVertical;

  const UserImage = fabric.util.createClass(fabric.Image, {
    type: "userImage",
    disableCrop: false,
    clipPosition: null,
    previousTarget: null,
    cropWidth: 0,
    cropHeight: 0,
    changeWidth: 0,
    changeHeight: 0,
    rightChange: 0,
    bottomChange: 0,
    initialize(element, options) {
      options = options || {};
      options = Object.assign({
        cropHeight: this.height,
        cropWidth: this.width
      }, options);

      if (!("clipPosition" in options) || Object.values(fabric.UserImage.CLIP_POSITIONS).indexOf(options.clipPosition) === -1) {
        options.clipPosition = fabric.UserImage.CLIP_POSITIONS.CENTER_MIDDLE;
      }

      this.callSuper("initialize", element, options);

      if (!this.disableCrop) {
        this.applyCrop();
      }
    },

    getCrop(image, size, scaleX, scaleY, trim_from, corner, target) {
      let width = size.width;
      let height = size.height;

      // Calculate the crop width and height based on the provided size
      console.log('scaleX', scaleX, 'scaleY', scaleY)
      let x = this.cropX;
      let y = this.cropY;
     
      let newWidth = Math.min(width, image.width * scaleX);
      let newHeight = Math.min(height, image.height * scaleY);
      
      if (this.clipPosition === fabric.UserImage.CLIP_POSITIONS.LEFT_TOP) {
        x = this.cropX;
        y = this.cropY;
      } else if (this.clipPosition === fabric.UserImage.CLIP_POSITIONS.LEFT_MIDDLE) {
        x = this.cropX;
        y = this.cropY;
        if(this.previousTarget){
          x = target.cropX;
          y = target.cropY;
         }
      } else if (this.clipPosition === fabric.UserImage.CLIP_POSITIONS.LEFT_BOTTOM) {
        x = 0;
        y = image.height - newHeight;
      } else if (this.clipPosition === fabric.UserImage.CLIP_POSITIONS.CENTER_TOP) {
        x = this.cropX + this.cropWidth - newWidth;
        y = this.cropY;
      } else if (this.clipPosition === fabric.UserImage.CLIP_POSITIONS.CENTER_MIDDLE) {
        //console.log("thisx ..................", this)
         x = (image.width * this.scaleX  - newWidth)/2;
         y = (image.height * this.scaleY - newHeight)/2;
         
        
      } else if (this.clipPosition === fabric.UserImage.CLIP_POSITIONS.CENTER_BOTTOM) {
        x = this.cropX + this.cropWidth - newWidth;
        y = this.cropY + this.cropHeight - newHeight;
      } else if (this.clipPosition === fabric.UserImage.CLIP_POSITIONS.RIGHT_TOP) {
        x = image.width - newWidth;
        y = 0;
        
      } else if (this.clipPosition === fabric.UserImage.CLIP_POSITIONS.RIGHT_MIDDLE) {
        x = this.cropX + this.cropWidth - newWidth;
        y = this.cropY + this.cropHeight - newHeight;
      } else if (this.clipPosition === fabric.UserImage.CLIP_POSITIONS.RIGHT_BOTTOM) {
        x = image.width - newWidth;
        y = image.height - newHeight;
      
      } else {
        console.error(
          new Error("Unknown clip position property - " + this.clipPosition)
        );
      }

      const scaleToFitWidth = width / this.getBoundingRect().width;
      const scaleToFitHeight = height / this.getBoundingRect().height;
      const scale = Math.max(scaleToFitWidth, scaleToFitHeight);

      newWidth *= scale;
      newHeight *= scale;
    

      return {
        cropX: x,
        cropY: y,
        cropWidth: newWidth,
        cropHeight: newHeight,
      };
    },


    applyCrop(c_position, target) {
      this.clipPosition = c_position || 'center-middle';
      
      
      let trim_from;
      if (
        c_position === fabric.UserImage.CLIP_POSITIONS.CENTER_TOP
        || c_position === fabric.UserImage.CLIP_POSITIONS.CENTER_BOTTOM
      ) {
        trim_from = 'height';
      } else if (
        c_position === fabric.UserImage.CLIP_POSITIONS.LEFT_MIDDLE
        || c_position === fabric.UserImage.CLIP_POSITIONS.RIGHT_MIDDLE
      ) {
        trim_from = 'width';
      }
      if (this.disableCrop) return;

      let boudingRect = this.getBoundingRect();


  
      const crop = this.getCrop(
        this.getOriginalSize(),
        {
          width: this.getScaledWidth(),
          height: this.getScaledHeight(),
        },
        this.scaleX,
        this.scaleY,
        trim_from,
        c_position,
        this.previousTarget
      );

      if (target && c_position === 'center-middle') {
        // Use the previous state for subsequent crops
        crop.width = target.width;
        crop.height = target.height;
        crop.cropWidth = target.cropWidth;
        crop.cropHeight = target.cropHeight;
        crop.cropX = target.cropX;
        crop.cropY = target.cropY;
        crop.scaleX = target.scaleX;
        crop.scaleY = target.scaleY;
        this.previousTarget = crop;
      } else {
        // Clear the previous state if it's not a 'center-middle' crop
        this.previousTarget = null;
      }
      
      this.set(crop);
      this.setCoords();
      console.log('this x------------', this)
      canvas.renderAll();
    },


    _render(ctx) {
      if (this.disableCrop) {
        this.cropX = 0;
        this.cropY = 0;
        this.callSuper("_render", ctx);
        return;
      }

      const width = this.width,
        height = this.height,
        cropWidth = this.cropWidth,
        cropHeight = this.cropHeight,
        cropX = this.cropX,
        cropY = this.cropY;

      ctx.save();
      ctx.drawImage(
        this._element,
        cropX,
        cropY,
        cropWidth,
        cropHeight,
        -width / 2,
        -height / 2,
        width,
        height
      );
      ctx.restore();
    },

    toObject(options) {
      options = options || [];
      return this.callSuper("toObject", [].concat(Array.from(options), ["cropWidth", "cropHeight", "disableCrop"]));
    }
  });

  UserImage.CLIP_POSITIONS = {
    LEFT_TOP: "left-top",
    LEFT_MIDDLE: "left-middle",
    LEFT_BOTTOM: "left-bottom",
    CENTER_TOP: "center-top",
    CENTER_MIDDLE: "center-middle",
    CENTER_BOTTOM: "center-bottom",
    RIGHT_TOP: "right-top",
    RIGHT_MIDDLE: "right-middle",
    RIGHT_BOTTOM: "right-bottom"
  }

  UserImage.fromObject = function (object, callback) {
    fabric.util.loadImage(object.src, function (img, error) {
      if (error) {
        callback && callback(null, error);
        return;
      }
      fabric.Image.prototype._initFilters.call(object, object.filters, function (filters) {
        object.filters = filters || [];
        fabric.Image.prototype._initFilters.call(object, [object.resizeFilter], function (resizeFilters) {
          object.resizeFilter = resizeFilters[0];
          const image = new fabric.UserImage(img, object);
          callback(image);
        });
      });
    }, null, object.crossOrigin);
  };

  fabric.UserImage = UserImage;
  fabric.UserImage.async = true;

  const controlsUtils = fabric.controlsUtils,
    scaleSkewStyleHandler = controlsUtils.scaleSkewCursorStyleHandler,
    scaleStyleHandler = controlsUtils.scaleCursorStyleHandler,
    scalingEqually = controlsUtils.scalingEqually,
    scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX,
    scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY,
    scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName,
    scalingX = controlsUtils.scalingX,
    scalingY = controlsUtils.scalingY;

  function actionScalingOrSkewingCropHandler(eventData, transform, x, y) {
    //console.log('control utils', controlsUtils)
    const { target, corner } = transform;
    let clip_position = UserImage.CLIP_POSITIONS.CENTER;
    if (corner === 'mt') {
      clip_position = UserImage.CLIP_POSITIONS.CENTER_BOTTOM
    } else if (corner === 'mb') {
      clip_position = UserImage.CLIP_POSITIONS.CENTER_TOP
    } else if (corner === 'ml') {
      clip_position = UserImage.CLIP_POSITIONS.RIGHT_MIDDLE
    } else if (corner === 'mr') {
      clip_position = UserImage.CLIP_POSITIONS.LEFT_MIDDLE
    }

    let act;
    target.applyCrop(clip_position);
    if (corner === "mr" || corner === "ml") {
      act = scalingXOrSkewingY(eventData, transform, x, y);
    }

    if (corner === "mt" || corner === "mb") {

      act = scalingYOrSkewingX(eventData, transform, x, y);
    }

    return act;
  }

  function actionScalingEquallyCropHandler(eventData, transform, x, y) {
    const { target, corner } = transform;

    if (["tl", "tr", "bl", "br"].indexOf(corner) > -1 && eventData.shiftKey) {
      console.log("center-middle...................")
      target.applyCrop();
    }


    const currentWidth = target.width * target.scaleX;
    const currentHeight = target.height * target.scaleY;

    const newWidth = target.getScaledWidth(); // Calculate the new width based on scaling
    const scaleFactor = newWidth / currentWidth; // Calculate the scale factor

    const cropWidth = target.cropWidth / scaleFactor;
    const cropHeight = target.cropHeight / scaleFactor;

    const cropX = target.cropX + (target.cropWidth - cropWidth) / 2;
    const cropY = target.cropY + (target.cropHeight - cropHeight) / 2;


    target.set({
      width: currentWidth,
      height: currentWidth / scaleFactor,
      cropWidth,
      cropHeight,
      cropX,
      cropY,
    });

    target.applyCrop('center-middle', target);
    // Apply the updated crop
    const action = scalingEqually(eventData, transform, x, y); // Apply scaling action
    return action;
  }


  function render(shadowOffsetX, shadowOffsetY, fn) {
    const angle = this.angle;

    return function (ctx, left, top, styleOverride, fabricObject) {
      if (fabricObject.disableCrop) {
        return controlsUtils.renderCircleControl(ctx, left, top, styleOverride, fabricObject);
      }

      ctx.save();
      ctx.translate(left, top);
      ctx.rotate(fabric.util.degreesToRadians(angle + fabricObject.angle));
      ctx.shadowColor = "rgba(0, 0, 0, 0.7)";
      ctx.shadowBlur = 2;
      ctx.shadowOffsetX = shadowOffsetX;
      ctx.shadowOffsetY = shadowOffsetY;
      ctx.beginPath();
      ctx.lineWidth = 6;
      ctx.lineCap = "round";
      ctx.strokeStyle = "#FFFFFF";
      fn.call(this, ctx)
      ctx.stroke();
      ctx.restore();
    }
  }

  function renderLeftOrRight(ctx, left, top, styleOverride, fabricObject) {
    render.call(this, 0, 0, function (ctx) {
      ctx.moveTo(0, -8);
      ctx.lineTo(0, 8);
    })(ctx, left, top, styleOverride, fabricObject);
  }

  function renderTopOrBottom(ctx, left, top, styleOverride, fabricObject) {
    render.call(this, 0, 0, function (ctx) {
      ctx.moveTo(-8, 0);
      ctx.lineTo(8, 0);
    })(ctx, left, top, styleOverride, fabricObject);
  }

  const userImageControls = {
    mr: new fabric.Control({
      x: 0.5,
      y: 0,
      cursorStyleHandler: scaleSkewStyleHandler,
      getActionName: scaleOrSkewActionName,
      actionHandler: actionScalingOrSkewingCropHandler,
      render: renderLeftOrRight
    }),

    ml: new fabric.Control({
      x: -0.5,
      y: 0,
      cursorStyleHandler: scaleSkewStyleHandler,
      getActionName: scaleOrSkewActionName,
      actionHandler: actionScalingOrSkewingCropHandler,
      render: renderLeftOrRight
    }),

    mt: new fabric.Control({
      x: 0,
      y: -0.5,
      cursorStyleHandler: scaleSkewStyleHandler,
      getActionName: scaleOrSkewActionName,
      actionHandler: actionScalingOrSkewingCropHandler,
      render: renderTopOrBottom
    }),

    mb: new fabric.Control({
      x: 0,
      y: 0.5,
      cursorStyleHandler: scaleSkewStyleHandler,
      getActionName: scaleOrSkewActionName,
      actionHandler: actionScalingOrSkewingCropHandler,
      render: renderTopOrBottom
    }),

    tl: new fabric.Control({
      x: -0.5,
      y: -0.5,
      cursorStyleHandler: scaleStyleHandler,
      actionHandler: actionScalingEquallyCropHandler
    }),

    tr: new fabric.Control({
      x: 0.5,
      y: -0.5,
      cursorStyleHandler: scaleStyleHandler,
      actionHandler: actionScalingEquallyCropHandler
    }),

    bl: new fabric.Control({
      x: -0.5,
      y: 0.5,
      cursorStyleHandler: scaleStyleHandler,
      actionHandler: actionScalingEquallyCropHandler
    }),

    br: new fabric.Control({
      x: 0.5,
      y: 0.5,
      cursorStyleHandler: scaleStyleHandler,
      actionHandler: actionScalingEquallyCropHandler
    }),

    mtr: new fabric.Control({
      x: 0,
      y: -0.5,
      actionHandler: controlsUtils.rotationWithSnapping,
      cursorStyleHandler: controlsUtils.rotationStyleHandler,
      offsetY: -40,
      withConnection: true,
      actionName: 'rotate',
    })
  }

  fabric.UserImage.prototype.controls = userImageControls;


  let imgObj = new Image(), image = null;

  imgObj.crossOrigin = "anonymous"
  imgObj.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6JavL8o0BLx1-BXc74ndZdPkLKRCPYQGibA&usqp=CAU";
  imgObj.onload = () => {
    image = new fabric.UserImage(imgObj, { left: 10, top: 50 });
    canvas.add(image);
  }

  const stateCrop = {}


</script>
</html>`

2 replies

ShaMan123 Nov 28, 2023

dumping a ton of code is a bad approach to ask for help

arshkhan-pathan Jan 30, 2024

@abhimanyu1990 Did you get any solution to this?

ShaMan123 · 2023-11-28T07:34:56Z

ShaMan123
Nov 28, 2023

@i-prikot do you mind making a v6 demo? or publishing your control as an npm package?

0 replies

more-strive · 2023-12-18T13:54:43Z

more-strive
Dec 18, 2023

https://github.com/dromara/yft-design
demo: https://yft.design/

0 replies

asturur · 2024-03-12T08:51:36Z

asturur
Mar 12, 2024
Maintainer

@more-strive can i ask you where did you took those nice cropping controls?

12 replies

asturur Mar 12, 2024
Maintainer

How can I confirm that it is your open-source repository? Can you pull me in and take a look? If so, I can delete crop the relevant code

Is NOT open-source. That is the point

more-strive Mar 12, 2024

Thank you for your reminder. As the code has already been open-source and references many other libraries, I haven't had time to organize it yet. What should I do now?
Can you use the yft-design project as the official demonstration

asturur Mar 12, 2024
Maintainer

You will need to add a text header on top of each of those code files that says that this code is not under GPL or MIT license, and who the original authors are.
Whoever wants to use your repo needs to know that part of the code is not of the same license that you attribute to the code written by you.

more-strive Mar 12, 2024

Okay, can you submit a PR for a file? I'll take care of the remaining files

asturur Mar 12, 2024
Maintainer

Yes i will, i will ask which is the correct header and submit it in the repo

bitttttten · 2024-07-25T09:24:04Z

bitttttten
Jul 25, 2024

Are there any plugins yet that are working on image cropping solutions like the one @more-strive shared?

0 replies

ouyoungs · 2024-10-29T03:04:57Z

ouyoungs
Oct 29, 2024

crop image, This is a common requirement.

4 replies

i-prikot Oct 29, 2024
Author

crop image, This is a common requirement.

Hi. I thought it had been done a long time ago )

ouyoungs Oct 29, 2024

Do you have any ideas now

i-prikot Oct 29, 2024
Author

No, I have no ideas. But maybe someone has already written a functionality for cropping an image.

asturur Oct 29, 2024
Maintainer

you can build cropping controls using the custom controls api, using the Control class and writing a bunch of functionalities

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scale image to fit available area without its stretching #7155

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 7 comments 21 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Scale image to fit available area without its stretching #7155

Replies: 7 comments · 21 replies

melchiar Jun 27, 2021 Collaborator

i-prikot Jun 27, 2021 Author

melchiar Jun 28, 2021 Collaborator

asturur Jul 3, 2021 Maintainer

asturur Mar 12, 2024 Maintainer

asturur Mar 12, 2024 Maintainer

asturur Mar 12, 2024 Maintainer

asturur Mar 12, 2024 Maintainer

i-prikot Oct 29, 2024 Author

i-prikot Oct 29, 2024 Author

asturur Oct 29, 2024 Maintainer

Replies: 7 comments 21 replies

melchiar
Jun 27, 2021
Collaborator

i-prikot Jun 27, 2021
Author

melchiar Jun 28, 2021
Collaborator

asturur Jul 3, 2021
Maintainer

asturur
Mar 12, 2024
Maintainer

asturur Mar 12, 2024
Maintainer

asturur Mar 12, 2024
Maintainer

asturur Mar 12, 2024
Maintainer

i-prikot Oct 29, 2024
Author

i-prikot Oct 29, 2024
Author

asturur Oct 29, 2024
Maintainer