5

我对 Angular 很陌生。我正在尝试使用 Angular 2 制作一个简单的 Web 应用程序，我允许用户从他们的本地计算机中选择和图像。然后我想在<img>标签中显示这个图像。稍后对图像执行操作，如旋转、更改比例、更改宽度……等。

这就是我的组件中的内容

@Component({
    selector: 'image-container',
    template: `
        <input type="file" (change)="changeListner($event)" />
        <img id="image"/>
    `,
    directives: [ImageActionsComponent]
})
export class ImageContainerComponent { 
   // make FileReader work with Angular2
   changeListner(event){
        var reader = new FileReader();

        reader.onloaded = function (e) {
            // get loaded data and render thumbnail.
            var src = e.target.result;
            document.getElementById("image").src = src;
        };

        // read the image file as a data URL.
        reader.readAsDataURL(event.target.files[0]);
    }
}

但它根本不起作用。如何使用 Angular2 读取图像并更新 src 属性？

我只是想学习 Angular。:)

有没有更好更简单的方法来做到这一点？

4

4 回答 4

7

它不起作用，因为您有onloaded事件名称。没有这样的事件，应该是onload：

import {Component, ElementRef} from 'angular2/core'

@Component({
    selector: 'image-container',
    template: `
        <input type="file" (change)="changeListner($event)" />
        <img class="image" />
    `,
    directives: [ImageActionsComponent]
})
export class ImageContainerComponent {
    constructor(private element: ElementRef) {}

    changeListner(event) {
        var reader = new FileReader();
        var image = this.element.nativeElement.querySelector('.image');

        reader.onload = function(e) {
            var src = e.target.result;
            image.src = src;
        };

        reader.readAsDataURL(event.target.files[0]);
    }
}

此外，最好使用ElementRef在组件中定位图像。

于 2016-02-12T07:31:06.670 回答
2

对于那些因 angular 遇到此错误的人：EventTarget 类型上不存在属性结果

您可以通过以下方式解决它：

this.url = event.target['result']
于 2017-09-20T10:12:39.537 回答
1

正如此答案所述，如何在 Angular 2/Typescript 中预览存储在假路径中的图片以避免在类型“eventtarget”上不存在属性“result”，您还可以将 e 的类型确定为如下所示：

reader.onload = function(e: any) {
        var src = e.target.result;
        image.src = src;
    };
于 2017-11-28T05:59:43.900 回答
0

我的解决方案是这样的：

reader.onload = (e) => {
   image.src=reader.result;
}
于 2017-10-22T23:29:11.567 回答