Skip to content

Commit

Permalink
fix readme
Browse files Browse the repository at this point in the history
  • Loading branch information
MaxymGorn committed Oct 21, 2023
1 parent 4e7bfa3 commit 015fce2
Showing 1 changed file with 11 additions and 8 deletions.
19 changes: 11 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,9 +123,9 @@ And then use it in Razor file ([for example](https://github.com/CropperBlazor/Cr

```razor
<CropperComponent
Class="cropper-demo"
Class="cropper-container"
ErrorLoadImageClass="cropper-error-load"
@ref="cropperComponent"
@ref="CropperComponent"
OnCropStartEvent="OnCropStartEvent"
OnCropEndEvent="OnCropEndEvent"
OnCropEvent="OnCropEvent"
Expand All @@ -135,23 +135,26 @@ And then use it in Razor file ([for example](https://github.com/CropperBlazor/Cr
OnLoadImageEvent="OnLoadImageEvent"
Src="@Src"
InputAttributes="@InputAttributes"
ErrorLoadImageSrc="@ErrorLoadImageSrc"
ErrorLoadImageSrc="@_errorLoadImageSrc"
IsErrorLoadImage="@IsErrorLoadImage"
OnErrorLoadImageEvent="OnErrorLoadImageEvent"
Options="options">
Options="Options"
IsAvaibleInitCropper="IsAvaibleInitCropper">
</CropperComponent>
```

And then use it in [*.razor.cs file](https://github.com/CropperBlazor/Cropper.Blazor/blob/dev/src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs)

You may override Cropper JavaScript module with execution script which can replace 6 event handlers (onReady, onCropStart, onCropMove, onCropEnd, onCrop, onZoom), such as overriding the onZoom callback in JavaScript:
```js
window.overrideCropperJsInteropModule = (minZoomRatio, maxZoomRatio) => {
window.overrideOnZoomCropperEvent = (minZoomRatio, maxZoomRatio) => {
window.cropper.onZoom = function (imageObject, event, correlationId) {
const jSEventData = this.getJSEventData(event, correlationId);
const isApplyPreventZoomRatio = minZoomRatio != null || maxZoomRatio != null;
const jSEventData = this.getJSEventData(event, correlationId);

const isApplyPreventZoomMinRatio = (minZoomRatio != null) && (minZoomRatio > event.detail.ratio);
const isApplyPreventZoomMaxRatio = (maxZoomRatio != null) && (event.detail.ratio > maxZoomRatio);

if (isApplyPreventZoomRatio && (event.detail.ratio < minZoomRatio || event.detail.ratio > maxZoomRatio)) {
if (isApplyPreventZoomMinRatio || isApplyPreventZoomMaxRatio) {
event.preventDefault();
}
else {
Expand Down

0 comments on commit 015fce2

Please sign in to comment.