Получить размер изображения в угловой 2

Я пишу код для загрузки файла изображения. Мне нужно знать размеры (высоту и ширину) изображения, которое будет загружено до того, как я вызову функцию для загрузки.Получить размер изображения в угловой 2

Есть ли способ в угловом 2, с помощью которого я могу извлечь размер изображения? Если да, то как?

источник

2016-12-15 Rai

Вы должны получить сам объект изображения, а затем попросить размеров. Как выглядит ваш код? – John

-1

Вы должны использовать JS код, чтобы найти высоту и ширину изображения следующим образом:

<!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>

В коде выше мы должны поместить выбранное изображение в элементе изображения, после того, как во время процесса загрузки высоты проверки и ширины и процесс загрузки.

Благодаря ...

источник

2016-12-15 07:34:52

Я не могу себе представить, почему, если вопрос явно о угловом2, как здесь может помочь jQuery? –

В angular2 образом, я буду создавать пользовательские директивы, чтобы получить высоту и ширину любого элемента. Для img я применим его (директиву) в теге img, и всякий раз, когда я хочу получить высоту & ширину img, мне просто нужно щелкнуть по нему. вы можете изменить в соответствии с вашими потребностями.

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'; 
}

источник

2016-12-15 07:40:40 micronyks

Я создал функцию, чтобы получить размер

изображения

getImgSize(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; }

источник

2018-03-05 16:28:23 kostia24

Получить размер изображения в угловой 2

ответ

Смежные вопросы