Angular 2允许用户从本地机器中选择和成像

发布时间：2020-12-17 17:56:21 所属栏目：安全来源：网络整理

导读：我对Angular很新.我正在尝试使用Angular 2创建一个简单的Web应用程序,我允许用户从本地计算机中选择和映像.然后我想在 img中显示此图像标签.稍后对图像执行操作,如旋转,更改比例,更改宽度等. 这就是我的组件中的内容 @Component({ selector: 'image-containe

我对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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!