mirror of https://github.com/Nofated095/Dress.git
photo info
This commit is contained in:
zh99998
parent
42365b9bbd
commit
3053403376
|
|
@ -137,16 +137,16 @@
|
|||
}
|
||||
},
|
||||
"@angular/cli": {
|
||||
"version": "6.2.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.2.0-beta.2.tgz",
|
||||
"integrity": "sha512-FFdDAoZgPANmZro2oIBT9jQteCS4ijRKvgqBkuxSAH5mUTqQvdiyVycxsNHwVg2ap5Jd+iowUWxV3aWi8tU04A==",
|
||||
"version": "6.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.1.3.tgz",
|
||||
"integrity": "sha512-S0uVQKKWETeX/mZ0WEZ2f+4xHArEtJ1hRl4GWKZEzU+vpptVnUXDDLC5aiN1ArfEcI1TShDsdhRSYSfccif2xA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@angular-devkit/architect": "0.8.0-beta.2",
|
||||
"@angular-devkit/core": "0.8.0-beta.2",
|
||||
"@angular-devkit/schematics": "0.8.0-beta.2",
|
||||
"@schematics/angular": "0.8.0-beta.2",
|
||||
"@schematics/update": "0.8.0-beta.2",
|
||||
"@angular-devkit/architect": "0.7.3",
|
||||
"@angular-devkit/core": "0.7.3",
|
||||
"@angular-devkit/schematics": "0.7.3",
|
||||
"@schematics/angular": "0.7.3",
|
||||
"@schematics/update": "0.7.3",
|
||||
"opn": "^5.3.0",
|
||||
"rxjs": "^6.0.0",
|
||||
"semver": "^5.1.0",
|
||||
|
|
@ -154,49 +154,6 @@
|
|||
"yargs-parser": "^10.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular-devkit/architect": {
|
||||
"version": "0.8.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.8.0-beta.2.tgz",
|
||||
"integrity": "sha512-YUPsVm0bI2d0+p5y0U7qOpbMjVzojq5vGMsyTC364tDlUDMbFQddvGgUUV9LJrpMTLn3x2U2u4NgAcxZZFepoA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@angular-devkit/core": "0.8.0-beta.2",
|
||||
"rxjs": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"@angular-devkit/core": {
|
||||
"version": "0.8.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.8.0-beta.2.tgz",
|
||||
"integrity": "sha512-q+hK/KppQFCWf6fxHLBCxEwxwBUJiSTwPGhYBcU1ZY5kz3hyBfzcuo91u04ey4hHXtROHnZmrHIN7lcu6MnaFw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ajv": "~6.4.0",
|
||||
"chokidar": "^2.0.3",
|
||||
"rxjs": "^6.0.0",
|
||||
"source-map": "^0.5.6"
|
||||
}
|
||||
},
|
||||
"@angular-devkit/schematics": {
|
||||
"version": "0.8.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.8.0-beta.2.tgz",
|
||||
"integrity": "sha512-a8x6Dpz6oEmGQ1/I0nTeVu1+BKepfWLZYcQaol2rAb6zOSXavpeMKaN91tUHi5+4oznYcKGkI7wfEW9WLaeRHQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@angular-devkit/core": "0.8.0-beta.2",
|
||||
"rxjs": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"@schematics/angular": {
|
||||
"version": "0.8.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.8.0-beta.2.tgz",
|
||||
"integrity": "sha512-Igq/Q0UYvRPTvioFrxq/yUc+G/QtVBD4HLUOYUNNcheUJEeiTaQgNgHntIu7s4lYiqzNk8WM5GvJqErWAlTjQg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@angular-devkit/core": "0.8.0-beta.2",
|
||||
"@angular-devkit/schematics": "0.8.0-beta.2",
|
||||
"typescript": ">=2.6.2 <2.10"
|
||||
}
|
||||
},
|
||||
"camelcase": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
|
||||
|
|
@ -495,41 +452,17 @@
|
|||
}
|
||||
},
|
||||
"@schematics/update": {
|
||||
"version": "0.8.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.8.0-beta.2.tgz",
|
||||
"integrity": "sha512-y0Dhkb/lW6J1b5MQjiWRXjKa0A/+bM5UyZoCY3YfB6Gi9hpkbQyLdjvkxwYaVUZW56hKRHQsBvonZHs4Sj8nDg==",
|
||||
"version": "0.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.7.3.tgz",
|
||||
"integrity": "sha512-3nERgcu/fy2WG4U8wkYT7GbXzQsKSJUahXFRC6t0DIt5xNYhFzFyA91+QbSLLlRTJsHi3AqZ2GTufHuHKsCG6w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@angular-devkit/core": "0.8.0-beta.2",
|
||||
"@angular-devkit/schematics": "0.8.0-beta.2",
|
||||
"@angular-devkit/core": "0.7.3",
|
||||
"@angular-devkit/schematics": "0.7.3",
|
||||
"npm-registry-client": "^8.5.1",
|
||||
"rxjs": "^6.0.0",
|
||||
"semver": "^5.3.0",
|
||||
"semver-intersect": "^1.1.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular-devkit/core": {
|
||||
"version": "0.8.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.8.0-beta.2.tgz",
|
||||
"integrity": "sha512-q+hK/KppQFCWf6fxHLBCxEwxwBUJiSTwPGhYBcU1ZY5kz3hyBfzcuo91u04ey4hHXtROHnZmrHIN7lcu6MnaFw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ajv": "~6.4.0",
|
||||
"chokidar": "^2.0.3",
|
||||
"rxjs": "^6.0.0",
|
||||
"source-map": "^0.5.6"
|
||||
}
|
||||
},
|
||||
"@angular-devkit/schematics": {
|
||||
"version": "0.8.0-beta.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.8.0-beta.2.tgz",
|
||||
"integrity": "sha512-a8x6Dpz6oEmGQ1/I0nTeVu1+BKepfWLZYcQaol2rAb6zOSXavpeMKaN91tUHi5+4oznYcKGkI7wfEW9WLaeRHQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@angular-devkit/core": "0.8.0-beta.2",
|
||||
"rxjs": "^6.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@types/jasmine": {
|
||||
|
|
@ -3178,6 +3111,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"exif-js": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/exif-js/-/exif-js-2.3.0.tgz",
|
||||
"integrity": "sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ="
|
||||
},
|
||||
"exit": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
"@angular/router": "^6.1.0",
|
||||
"@angular/service-worker": "^6.1.0",
|
||||
"core-js": "^2.5.7",
|
||||
"exif-js": "^2.3.0",
|
||||
"marked": "^0.4.0",
|
||||
"material-design-icons": "^3.0.1",
|
||||
"roboto-fontface": "^0.10.0",
|
||||
|
|
@ -34,7 +35,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.7.0",
|
||||
"@angular/cli": "^6.2.0-beta.2",
|
||||
"@angular/cli": "^6.1.3",
|
||||
"@angular/compiler-cli": "^6.1.0",
|
||||
"@angular/language-service": "^6.1.0",
|
||||
"@types/jasmine": "~2.8.6",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<ng-template #title><h2>{{album.name}}</h2></ng-template>
|
||||
|
||||
|
||||
<a *ngFor="let file of album.files" [href]="'Dress/' + album.name + '/' + file" target="_blank">
|
||||
<a *ngFor="let file of album.files" [routerLink]="['/photos', album.name, file]">
|
||||
<img [src]="'Dress/' + album.name + '/' + file">
|
||||
</a>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -3,10 +3,12 @@ import { RouterModule, Routes } from '@angular/router';
|
|||
import { PhotosComponent } from './photos/photos.component';
|
||||
import { AlbumsComponent } from './albums/albums.component';
|
||||
import { AlbumComponent } from './album/album.component';
|
||||
import { PhotoComponent } from './photo/photo.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: 'photos', pathMatch: 'full' },
|
||||
{ path: 'photos', component: PhotosComponent },
|
||||
{ path: 'photos/:album/:filename', component: PhotoComponent },
|
||||
{ path: 'albums', component: AlbumsComponent },
|
||||
{ path: 'albums/:id', component: AlbumComponent }
|
||||
];
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<mat-nav-list>
|
||||
<a mat-list-item routerLink="photos"><mat-icon matListIcon>photo</mat-icon>照片</a>
|
||||
<a mat-list-item routerLink="albums"><mat-icon matListIcon>photo_library</mat-icon>相册</a>
|
||||
<a mat-list-item href="https://github.com/komeiji-satori/Dress"><mat-icon matListIcon>publish</mat-icon>上传</a>
|
||||
<a mat-list-item href="https://github.com/komeiji-satori/Dress" target="_blank"><mat-icon matListIcon>publish</mat-icon>上传</a>
|
||||
<!--<a mat-list-item href="https://github.com/komeiji-satori/Dress/issues/new" target="_blank">发送反馈</a>-->
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
|
|
|
|||
|
|
@ -21,9 +21,10 @@ import { AlbumsComponent } from './albums/albums.component';
|
|||
import { AlbumComponent } from './album/album.component';
|
||||
import { ServiceWorkerModule } from '@angular/service-worker';
|
||||
import { environment } from '../environments/environment';
|
||||
import { PhotoComponent } from './photo/photo.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AppComponent, PhotosComponent, AlbumsComponent, AlbumComponent],
|
||||
declarations: [AppComponent, PhotosComponent, AlbumsComponent, AlbumComponent, PhotoComponent],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
#wrapper {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
mat-list {
|
||||
width: 360px;
|
||||
}
|
||||
h4 {
|
||||
color: rgba(0,0,0,0.87);
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
p[mat-line].mat-line {
|
||||
display: flex;
|
||||
color: rgba(0,0,0,0.54);
|
||||
font-size: 14px ;
|
||||
line-height: 14px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
p[mat-line] > span {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<div id="wrapper">
|
||||
<img #image [src]="'Dress/' + album + '/' + filename" (load)="load()">
|
||||
</div>
|
||||
<mat-list>
|
||||
<h3 mat-subheader>详情</h3>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-icon>date_range</mat-icon>
|
||||
<h4 mat-line>{{commit.date | date}}</h4>
|
||||
<p mat-line>{{commit.date | date:'mediumTime'}}</p>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-icon>photo</mat-icon>
|
||||
<h4 mat-line>{{filename}}</h4>
|
||||
<p mat-line>
|
||||
<span>{{(image.naturalWidth * image.naturalHeight / 1000000) .toFixed(1)}}MP</span>
|
||||
<span>{{image.naturalWidth}}x{{image.naturalHeight}}</span>
|
||||
<span>{{image.filesize}}</span>
|
||||
</p>
|
||||
</mat-list-item>
|
||||
<mat-list-item *ngIf="exif">
|
||||
<mat-icon mat-list-icon>camera</mat-icon>
|
||||
<h4 mat-line>{{exif.Model}}</h4>
|
||||
<p mat-line>
|
||||
<span>ƒ/{{exif.FNumber}}</span>
|
||||
<span>1/{{1/exif.ExposureTime}}</span>
|
||||
<span>{{exif.FocalLength}} 毫米</span>
|
||||
<span>ISO{{exif.ISOSpeedRatings}}</span>
|
||||
</p>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<!--<h3 mat-subheader>Notes</h3>-->
|
||||
<!--<mat-list-item *ngFor="let note of notes">-->
|
||||
<!--<mat-icon mat-list-icon>note</mat-icon>-->
|
||||
<!--<h4 mat-line>{{note.name}}</h4>-->
|
||||
<!--<p mat-line> {{note.updated | date}} </p>-->
|
||||
<!--</mat-list-item>-->
|
||||
</mat-list>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import { Component, ElementRef, ViewChild } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import * as EXIF from 'exif-js';
|
||||
import commits from '../../data/photos.json';
|
||||
|
||||
@Component({
|
||||
selector: 'app-photo',
|
||||
templateUrl: './photo.component.html',
|
||||
styleUrls: ['./photo.component.css']
|
||||
})
|
||||
export class PhotoComponent {
|
||||
@ViewChild('image')
|
||||
image: ElementRef;
|
||||
|
||||
album = this.route.snapshot.paramMap.get('album');
|
||||
filename = this.route.snapshot.paramMap.get('filename');
|
||||
|
||||
commit = commits.find(commit => commit.files.includes(this.album + '/' + this.filename));
|
||||
exif;
|
||||
|
||||
constructor(private route: ActivatedRoute) {}
|
||||
|
||||
async load(event) {
|
||||
const self = this;
|
||||
EXIF.getData(this.image.nativeElement, function() {
|
||||
const exif = EXIF.getAllTags(this);
|
||||
if (Object.keys(exif).length === 0) {
|
||||
return;
|
||||
}
|
||||
self.exif = exif;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<span class="author">{{commit.username}}</span>
|
||||
<span class="message" *ngIf="commit.message">{{commit.message}}</span>
|
||||
</h4>
|
||||
<a *ngFor="let file of commit.files" [href]="'Dress/' + file" target="_blank">
|
||||
<a *ngFor="let file of commit.files" [routerLink]="file">
|
||||
<img [src]="'Dress/' + file">
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue