Chronostasys / Blazor.Cropper

A blazor library provides component to crop image
MIT License
84 stars 19 forks source link

Feature Request: Provide metadata via properties or function call. #38

Closed hounddog22030 closed 2 years ago

hounddog22030 commented 2 years ago

We would like to use this to record the metadata of the crop, instead of storing the cropped image. This will significantly reduce the size of storing the "cropped" images. We created a fork, but are some funkiness. Currently the worst funk is setting the crop box upon initialization if we have the metadata stored.

Our thoughts are it might be a better approach to request the maintainer to look into how to do this or at the least review a pull request and give some direction.

We'll post this pull request as well.

Thoughts?

Chronostasys commented 2 years ago

Hi @hounddog22030 , thanks for using the cropper.
I like your idea about adding metadata features, but I'm busying with my graduation project recently. I'll dig into it deeper as soon as I have time.

Chronostasys commented 2 years ago

@hounddog22030 I just found an eazy solustion for the initialization problem. Instead of adding PrevPosX and PrevPosY properties, I think add OffsetX and OffsetY shall be better. The changes to Cropper.razor.cs could be:

  [Parameter]
  public double OffsetX { set; get; }

  [Parameter]
  public double OffsetY { set; get; }

  private void InitStyles()
  {
      InitPos(ref _prevPosX, ref _prevPosY);
      _prevPosX += OffsetX;
      _prevPosY += OffsetY;

      if (initCropHeight > _imgh)
      {
          initCropHeight = _imgh;
      }
      if (initCropWidth > _imgw)
      {
          initCropWidth = _imgw;
      }

      SetCropperStyle();
      SetCroppedImgStyle();
      base.StateHasChanged();
  }

Note that the changes are based on the original mater branch and the code above doen't check if the value of OffsetX and OffsetY are reasonable.
I would add this feature in the next version of Cropper, thanks again for your idea.

hounddog22030 commented 2 years ago

Thanks. How do you propose handling Height and Width?

Chronostasys commented 2 years ago

Thanks. How do you propose handling Height and Width?

By setting InitCropWidth and InitCropHeight.

hounddog22030 commented 2 years ago

Put a PR out there (Feat/metadata #40)

It's not perfect and I haven't tested the GIF portion.

I also enlarged the example window (honestly, the small window was an initial turn off to this component to me).....

Set some defaults in the example page as well.

Let me know what you think.

P.S. There's a buildspec.yml in there for building in codebuild, you can delete it...

Chronostasys commented 2 years ago

Put a PR out there (Feat/metadata #40)

It's not perfect and I haven't tested the GIF portion.

I also enlarged the example window (honestly, the small window was an initial turn off to this component to me).....

Set some defaults in the example page as well.

Let me know what you think.

P.S. There's a buildspec.yml in there for building in codebuild, you can delete it...

Great work @hounddog22030! I'll merge it and release the change in the next release.
And about the small window, I'm considering remove the modal component in samples, as it depends on an external css file(from jsdelivery, which might be unaccessable from time to time in China). I'll make it bigger at that time.