-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Open
Description
angular 项目
图片加载后,只要图像占满了屏幕,就无法滚动到最下面? 手势挪动 全部拦截了
谢谢了
<div class="page-wrapper">
<div style="text-align:center" class="cropp-container">
<h2>CROP PHOTO</h2>
<div class="buttons-group">
<label for="photoUpload">
<input
#photoUpload
style="display:none;"
type="file"
id="photoUpload"
accept=".png, .jpg, .jpeg"
(change)="upload($event)"
/>
<button class="button--dark" (click)="photoUpload.click()">UPLOAD</button>
</label>
<button class="button--light" (click)="crop()">CROP</button>
<button class="button--white" (click)="clear()">CLEAR</button>
<button class="button--red" (click)="reset()">RESET</button>
</div>
<div class="cropper-wrapper">
<angular-cropper #angularCropper [imageUrl]="sourceImage" (export)="cl($event)"></angular-cropper>
</div>
<div class="buttons-group">
<button class="rotate" (click)="rotate(90)">
<img class="icon" src="assets/images/rotate.svg" alt="">
90°
</button>
<button class="zoom" (click)="zoom(true)">
<img class="icon" src="assets/images/zoom-in.svg" alt="">
</button>
<button class="zoom" (click)="zoom(false)">
<img class="icon" src="assets/images/zoom-out.svg" alt="">
</button>
<button class="zoom" (click)="scaleX()">
<img class="icon" src="assets/images/flip-horizontal.svg" alt="">
</button>
<button class="zoom" (click)="scaleY()">
<img class="icon" src="assets/images/flip-vertical.svg" alt="">
</button>
<button class="arrow" (click)="move(0, -10)">↑</button>
<button class="arrow" (click)="move(0, 10)">↓</button>
<button class="arrow" (click)="move(-10, 0)">←</button>
<button class="arrow" (click)="move(10, 0)">→</button>
</div>
</div>
</div>
@if(!!croppedImage){
<div class="cropped-container">
<img [src]="croppedImage" alt="">
</div>
}
Metadata
Metadata
Assignees
Labels
No labels