search

advanced-cropper / vue-advanced-cropper

The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
https://advanced-cropper.github.io/vue-advanced-cropper/
Other
977 stars 132 forks source link

Feature Request: stencil overlay #121

Closed luka-mikec closed 3 years ago

luka-mikec commented 3 years ago

Could you add a (simple) way to add an overlay for the rectangle stencil? I think a div, sibling to this one, would suffice: https://github.com/Norserium/vue-advanced-cropper/blob/master/src/components/helpers/Preview.vue#L197

It would be ideal if this was implemented as a slot for the main cropper component.

My use case is that I wish to provide a visual helper to the user (similar to the grid, but more advanced) on how to position the stencil.

Norserium commented 3 years ago

@luka-mikec, could you draw / provide the example of what you want to get? Anyway, you can create a custom stencil based on RectangleStencil and add everything that you want to one.

luka-mikec commented 3 years ago

@Norserium

I need something like this displayed above the stencil: image

So, it would be a semi-transparent PNG overlaying the stencil. In the meantime I realised I can probably accomplish this by overriding ::before and ::after (initially I thought I can't use them because I thought I'd need to use them for <img>, which doesn't support pseudo-elements), but it would be great if there was an easier way...

Edit: what I ended up doing:

.MY_CROPPER_CLASS .vue-rectangle-stencil {
  &__preview {
    &:after {
      content: '';
      background-image: url("~@/assets/OVERLAY.png");
      background-size: contain;
      opacity: 1 !important;
      position: absolute;
      pointer-events: none;
      z-index: 1;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
  }
}
Norserium commented 3 years ago

You can simplify the code above:

.stencil-overlay {
    &:after {
      content: '';
      background-image: url("~@/assets/OVERLAY.png");
      background-size: contain;
      opacity: 1 !important;
      position: absolute;
      pointer-events: none;
      z-index: 1;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
}

And in the template:

<cropper :stencil-props="{ class: 'stencil-overlay' }" />

If you need something more complex it's better to create the custom stencil.

Norserium commented 3 years ago

In conclusion, I suppose that this feature can simplify some use-cases, but in my opinion there are better alternatives to solve the described task:

Adding the possibility of adding an overlay to an arbitrary stencil may conflict with custom stencils or may add unnecessary complexity.