Still Stencil

[ugurcanalyuz]

Like on Facebook, I couldn't find anywhere to pin the Stencil and show the background only within the Stencil. Is this available?

[Norserium]

@ugurcanalyuz, could you provide the Facebook cropper screenshot? Do you want to achieve something like the first example?

[ugurcanalyuz]

@Norserium Thank you for your quick reply. I don't speak good English either, sorry for that. Facebook just scrolls the photo up and down within a fixed cutout area. This is exactly what I was looking for.

[ugurcanalyuz]

@Norserium Actually your example is very nice, I just couldn't find fixing the photo as a width.

[ugurcanalyuz]

@Norserium As you can see, the remaining parts are also visible in this system. Is it possible to hide the outside parts?

[Norserium]

@ugurcanalyuz, I suppose I understood you. Check this example.

[ugurcanalyuz]

@Norserium What level of man are you? You are great! <3 <3

[Norserium]

@ugurcanalyuz, thank you! I'm glad to help.

[ugurcanalyuz]

Greetings mate, I'm trying to add Radius for your example, but I can't subtract the radius during the demonstration. How can I do this? I couldn't add radius to the existing window :) @Norserium

.vue-preview {
  border-radius: 20px !important;
}

.vue-advanced-cropper__foreground {
  background-color: #242424 !important;
  border-radius: 20px !important;
}

.vue-advanced-cropper__image {
  border-radius: 20px !important;
}

.vue-advanced-cropper__background {
  border-radius: 20px !important;
}

[Norserium]

@ugurcanalyuz, hello again! Could you provide the picture of the desired result and your current cropper?

[ugurcanalyuz]

Greetings mate. I am attaching the photo as well. Your code works great, I just need to add Radius to the crop area. I will also need to use Radius 100% in the profile photo upload area. I think it would make the same sense. @Norserium

Cover Image

[ugurcanalyuz]

@Norserium This is how I actually need to make the crop area. For My Cover Photo.

[Norserium]

@ugurcanalyuz, check this example. I hidden the foreground and the background because they are useless here and in the same time they create some artifacts near the borders.

[ugurcanalyuz]

You are a wonderful man. I hope the library works with Nuxt 3 as well, I'll update it soon :) You're great mate! <3 @Norserium

[Norserium]

@ugurcanalyuz, you are welcome!

Yes, Nuxt 3 finally will be soon in the public beta. And I assume that the cropper will work well with it. It's based on Vue 3, and the version of this cropper for the this Vue version was released a long ago, and I assume it's stable now.

[rich06]

Thank you for this very useful software!

I am using the fixed stencil technique - based on your code sandbox - however I have 2 instances of the cropper on the page...

A problem occurs when the Vue app calls the .zoom() method which causes a crash with this error - [Vue warn]: Error in v-on handler: "TypeError: can't access property "left", n is null"

Any ideas on how to fix this? Thanks!

[Norserium]

@rich06, could you reproduce this error in the codesandbox?

[rich06]

@rich06, could you reproduce this error in the codesandbox?

Yes - I edited your code sandbox example by copying the existing cropper to create a second cropper instance and gave both croppers different refs. Then I added v-on:ready event handlers to both instances and in the handler function I called zoom() for both refs and the error I mentioned got logged in the console.

[Norserium]

@rich06, could you send me link to your codesandbox?

[rich06]

@ugurcanalyuz

I forked your codesandbox and have shared my version of it with your username. Thanks.

[Norserium]

@rich06, I assume that the problem happens because one of the cropper isn't ready when you call zoom method. Look at the example. But it's recommended to use default-visible-area property to set the initial zoom.

[rich06]

Okay - thanks for that tip I will look at that prop