Ich schreibe Code zum Hochladen einer Bilddatei. Ich muss die Abmessungen (Höhe und Breite) des Bildes wissen, die hochgeladen werden, bevor ich die Funktion zum Hochladen aufrufen.Bildabmessung in Winkel 2
Gibt es einen Weg in Winkel 2, mit dem ich die Bilddimension extrahieren kann? Wenn das so ist, wie?
Sie haben JS-Code zu verwenden, um die Höhe und Breite des Bildes wie folgt zu finden:
<!DOCTYPE html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
function readURL(input)
{
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image1')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
function upload()
{
var img = document.getElementById('image1');
var width = img.clientWidth;
var height = img.clientHeight;
alert(width + " : " + height);
//check height and width using above two variables (width/height) in if block and place upload code in if block...
}
</script>
</head>
<body>
<input type='file' onchange="readURL(this);" /><input type="button" value="Upload" onClick="upload()" /><br>
<img id="image1" src="#" alt="your image" height="auto" width="auto" />
</body>
</html>
In obigem Code, den wir in dem Bildelement zu platzieren ausgewählte Bilder haben, nachdem beim Upload Prozesskontrolle in Höhe und Breite und Prozess zum Hochladen
Dank ...
Ich kann mir nicht vorstellen, warum, wenn Frage klar über angular2 ist, wie kann jQuery hier helfen? –
In angular2 Weise werde ich eine benutzerdefinierte Richtlinie erstellen die Höhe und Breite von jedes Element zu erhalten. Für img, ich werde es (Richtlinie) in der img Tag anwenden und wann immer ich Höhe & Breite eines IMG bekommen möchte, brauche ich nur klicken Sie darauf. Sie können nach Ihren Bedürfnissen ändern.
DEMO: https://plnkr.co/edit/3tibSEJCF734KQ3PBNZc?p=preview
directive.ts
import { Directive,Input,Outpu,ElementRef,Renderer} from '@angular/core';
@Directive({
selector:"[getHeightWidth]",
host:{
'(click)':"show()"
}
})
export class GetEleDirective{
constructor(private el:ElementRef){
}
show(){
console.log(this.el.nativeElement);
console.log('height---' + this.el.nativeElement.offsetHeight);
console.log('width---' + this.el.nativeElement.offsetWidth);
}
}
app.ts
@Component({
selector: 'my-app',
template: `
<div style="width:200px;height:300px">
<img getHeightWidth <!-- here I'm using getHeightWidth directive-->
[src]="source" alt="Angular2"
width="100%"
height="100%">
</div>
`,
})
export class AppComponent {
source='images/angular.png';
}
I geschaffene Funktion Bildgröße
zu erhaltengetImgSize(image: string): Observable<ISize> {
let mapLoadedImage = (event): ISize => {
return {
width: event.target.width,
height: event.target.height
};
}
var image = new Image();
let $loadedImg = Observable.fromEvent(image, "load").take(1).map(mapLoadedImage);
image.src = image;
return $loadedImg;
}
interface ISize { width: number; height: number; }
Sie haben das Bildobjekt selbst zu erhalten, und dann für die Größen fragen. Wie sieht dein Code aus? – John