cropper & imageservice
This commit is contained in:
16
bizmatch/src/app/components/cropper/cropper.component.html
Normal file
16
bizmatch/src/app/components/cropper/cropper.component.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!-- CROPPER WRAPPER -->
|
||||
<div class="cropper-wrapper">
|
||||
|
||||
<!-- LOADING -->
|
||||
<div class="loading-block" *ngIf="isLoading">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
|
||||
<!-- LOAD ERROR -->
|
||||
<div class="alert alert-warning" *ngIf="loadError">{{ loadImageErrorText }}</div>
|
||||
|
||||
<!-- CROPPER -->
|
||||
<div class="cropper">
|
||||
<img #image alt="image" [src]="imageUrl" (load)="imageLoaded($event)" (error)="imageLoadError($event)" />
|
||||
</div>
|
||||
</div>
|
||||
356
bizmatch/src/app/components/cropper/cropper.component.scss
Normal file
356
bizmatch/src/app/components/cropper/cropper.component.scss
Normal file
@@ -0,0 +1,356 @@
|
||||
:host {
|
||||
display: block
|
||||
}
|
||||
|
||||
.cropper img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cropper-wrapper {
|
||||
position: relative;
|
||||
min-height: 80px
|
||||
}
|
||||
|
||||
.cropper-wrapper .loading-block {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.cropper-wrapper .loading-block .spinner {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
margin: 0 auto;
|
||||
border: 2px solid rgba(97, 100, 193, .98);
|
||||
border-radius: 50%;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
-webkit-animation: cssload-spin 425ms infinite linear;
|
||||
position: absolute;
|
||||
top: calc(50% - 15px);
|
||||
left: calc(50% - 15px);
|
||||
animation: cssload-spin 425ms infinite linear
|
||||
}
|
||||
|
||||
@-webkit-keyframes cssload-spin {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cssload-spin {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
/*!
|
||||
* Cropper.js v1.4.1
|
||||
* https://fengyuanchen.github.io/cropperjs
|
||||
*
|
||||
* Copyright 2015-present Chen Fengyuan
|
||||
* Released under the MIT license
|
||||
*
|
||||
* Date: 2018-07-15T09:54:43.167Z
|
||||
*/
|
||||
|
||||
.cropper-container {
|
||||
direction: ltr;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.cropper-container img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
image-orientation: 0deg;
|
||||
max-height: none !important;
|
||||
max-width: none !important;
|
||||
min-height: 0 !important;
|
||||
min-width: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cropper-wrap-box,
|
||||
.cropper-canvas,
|
||||
.cropper-drag-box,
|
||||
.cropper-crop-box,
|
||||
.cropper-modal {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.cropper-wrap-box,
|
||||
.cropper-canvas {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cropper-drag-box {
|
||||
background-color: #fff;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cropper-modal {
|
||||
background-color: #000;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.cropper-view-box {
|
||||
display: block;
|
||||
height: 100%;
|
||||
outline-color: rgba(51, 153, 255, 0.75);
|
||||
outline: 1px solid #39f;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cropper-dashed {
|
||||
border: 0 dashed #eee;
|
||||
display: block;
|
||||
opacity: .5;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cropper-dashed.dashed-h {
|
||||
border-bottom-width: 1px;
|
||||
border-top-width: 1px;
|
||||
height: calc(100% / 3);
|
||||
left: 0;
|
||||
top: calc(100% / 3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cropper-dashed.dashed-v {
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
height: 100%;
|
||||
left: calc(100% / 3);
|
||||
top: 0;
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
|
||||
.cropper-center {
|
||||
display: block;
|
||||
height: 0;
|
||||
left: 50%;
|
||||
opacity: .75;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.cropper-center:before,
|
||||
.cropper-center:after {
|
||||
background-color: #eee;
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.cropper-center:before {
|
||||
height: 1px;
|
||||
left: -3px;
|
||||
top: 0;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
.cropper-center:after {
|
||||
height: 7px;
|
||||
left: 0;
|
||||
top: -3px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.cropper-face,
|
||||
.cropper-line,
|
||||
.cropper-point {
|
||||
display: block;
|
||||
height: 100%;
|
||||
opacity: .1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cropper-face {
|
||||
background-color: #fff;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.cropper-line {
|
||||
background-color: #39f;
|
||||
}
|
||||
|
||||
.cropper-line.line-e {
|
||||
cursor: ew-resize;
|
||||
right: -3px;
|
||||
top: 0;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.cropper-line.line-n {
|
||||
cursor: ns-resize;
|
||||
height: 5px;
|
||||
left: 0;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.cropper-line.line-w {
|
||||
cursor: ew-resize;
|
||||
left: -3px;
|
||||
top: 0;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.cropper-line.line-s {
|
||||
bottom: -3px;
|
||||
cursor: ns-resize;
|
||||
height: 5px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.cropper-point {
|
||||
background-color: #39f;
|
||||
height: 5px;
|
||||
opacity: .75;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.cropper-point.point-e {
|
||||
cursor: ew-resize;
|
||||
margin-top: -3px;
|
||||
right: -3px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.cropper-point.point-n {
|
||||
cursor: ns-resize;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.cropper-point.point-w {
|
||||
cursor: ew-resize;
|
||||
left: -3px;
|
||||
margin-top: -3px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.cropper-point.point-s {
|
||||
bottom: -3px;
|
||||
cursor: s-resize;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.cropper-point.point-ne {
|
||||
cursor: nesw-resize;
|
||||
right: -3px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.cropper-point.point-nw {
|
||||
cursor: nwse-resize;
|
||||
left: -3px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.cropper-point.point-sw {
|
||||
bottom: -3px;
|
||||
cursor: nesw-resize;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.cropper-point.point-se {
|
||||
bottom: -3px;
|
||||
cursor: nwse-resize;
|
||||
height: 20px;
|
||||
opacity: 1;
|
||||
right: -3px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.cropper-point.point-se {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.cropper-point.point-se {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.cropper-point.point-se {
|
||||
height: 5px;
|
||||
opacity: .75;
|
||||
width: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.cropper-point.point-se:before {
|
||||
background-color: #39f;
|
||||
bottom: -50%;
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 200%;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.cropper-invisible {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.cropper-bg {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
|
||||
}
|
||||
|
||||
.cropper-hide {
|
||||
display: block;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.cropper-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.cropper-move {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.cropper-crop {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.cropper-disabled .cropper-drag-box,
|
||||
.cropper-disabled .cropper-face,
|
||||
.cropper-disabled .cropper-line,
|
||||
.cropper-disabled .cropper-point {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
179
bizmatch/src/app/components/cropper/cropper.component.ts
Normal file
179
bizmatch/src/app/components/cropper/cropper.component.ts
Normal file
@@ -0,0 +1,179 @@
|
||||
import { CommonModule } from "@angular/common";
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
ViewEncapsulation,
|
||||
ElementRef,
|
||||
ViewChild,
|
||||
Input,
|
||||
EventEmitter,
|
||||
Output,
|
||||
OnDestroy,
|
||||
} from "@angular/core";
|
||||
import { FormsModule } from "@angular/forms";
|
||||
import { BrowserModule } from "@angular/platform-browser";
|
||||
import Cropper from "cropperjs";
|
||||
|
||||
export interface ImageCropperSetting {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface ImageCropperResult {
|
||||
imageData: Cropper.ImageData;
|
||||
cropData: Cropper.CropBoxData;
|
||||
blob?: Blob;
|
||||
dataUrl?: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-cropper',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule],
|
||||
templateUrl: './cropper.component.html',
|
||||
styleUrl: './cropper.component.scss'
|
||||
})
|
||||
export class SCropperComponent implements OnInit, OnDestroy {
|
||||
@ViewChild("image", { static: true }) image: ElementRef;
|
||||
|
||||
@Input() imageUrl: any;
|
||||
@Input() settings: ImageCropperSetting;
|
||||
@Input() cropbox: Cropper.CropBoxData;
|
||||
@Input() loadImageErrorText: string;
|
||||
@Input() cropperOptions: any = {};
|
||||
|
||||
@Output() export = new EventEmitter<ImageCropperResult>();
|
||||
@Output() ready = new EventEmitter();
|
||||
|
||||
public isLoading: boolean = true;
|
||||
public cropper: Cropper;
|
||||
public imageElement: HTMLImageElement;
|
||||
public loadError: any;
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.cropper) {
|
||||
this.cropper.destroy();
|
||||
this.cropper = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Image loaded
|
||||
* @param ev
|
||||
*/
|
||||
imageLoaded(ev: Event) {
|
||||
//
|
||||
// Unset load error state
|
||||
this.loadError = false;
|
||||
|
||||
//
|
||||
// Setup image element
|
||||
const image = ev.target as HTMLImageElement;
|
||||
this.imageElement = image;
|
||||
|
||||
//
|
||||
// Add crossOrigin?
|
||||
if (this.cropperOptions.checkCrossOrigin)
|
||||
image.crossOrigin = "anonymous";
|
||||
|
||||
//
|
||||
// Image on ready event
|
||||
image.addEventListener("ready", () => {
|
||||
//
|
||||
// Emit ready
|
||||
this.ready.emit(true);
|
||||
|
||||
//
|
||||
// Unset loading state
|
||||
this.isLoading = false;
|
||||
|
||||
//
|
||||
// Validate cropbox existance
|
||||
if (this.cropbox) {
|
||||
//
|
||||
// Set cropbox data
|
||||
this.cropper.setCropBoxData(this.cropbox);
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
// Setup aspect ratio according to settings
|
||||
let aspectRatio = NaN;
|
||||
this.settings={width:300,height:100}
|
||||
if (this.settings) {
|
||||
const { width, height } = this.settings;
|
||||
aspectRatio = width / height;
|
||||
}
|
||||
|
||||
//
|
||||
// Set crop options
|
||||
// extend default with custom config
|
||||
this.cropperOptions = {
|
||||
...{
|
||||
aspectRatio,
|
||||
checkCrossOrigin: true,
|
||||
},
|
||||
...this.cropperOptions,
|
||||
};
|
||||
|
||||
//
|
||||
// Set cropperjs
|
||||
if (this.cropper) {
|
||||
this.cropper.destroy();
|
||||
this.cropper = undefined;
|
||||
}
|
||||
this.cropper = new Cropper(image, this.cropperOptions);
|
||||
}
|
||||
|
||||
/**
|
||||
* Image load error
|
||||
* @param event
|
||||
*/
|
||||
imageLoadError(event: any) {
|
||||
//
|
||||
// Set load error state
|
||||
this.loadError = true;
|
||||
|
||||
//
|
||||
// Unset loading state
|
||||
this.isLoading = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Export canvas
|
||||
* @param base64
|
||||
*/
|
||||
exportCanvas(base64?: any) {
|
||||
//
|
||||
// Get and set image, crop and canvas data
|
||||
const imageData = this.cropper.getImageData();
|
||||
const cropData = this.cropper.getCropBoxData();
|
||||
const canvas = this.cropper.getCroppedCanvas();
|
||||
const data = { imageData, cropData };
|
||||
|
||||
//
|
||||
// Create promise to resolve canvas data
|
||||
const promise = new Promise((resolve) => {
|
||||
//
|
||||
// Validate base64
|
||||
if (base64) {
|
||||
//
|
||||
// Resolve promise with dataUrl
|
||||
return resolve({
|
||||
dataUrl: canvas.toDataURL("image/png"),
|
||||
});
|
||||
}
|
||||
canvas.toBlob((blob) => resolve({ blob }));
|
||||
});
|
||||
|
||||
//
|
||||
// Emit export data when promise is ready
|
||||
promise.then((res: any) => {
|
||||
this.export.emit({ ...data, ...res });
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user