修复 EXIF 方向 Angular 2答案

【问题标题】：Fix EXIF orientation Angular 2修复 EXIF 方向 Angular 2
【发布时间】：2018-09-23 19:31:52
【问题描述】：

如何修复 Angular 2 中的 EXIF 方向？我正在从手机加载图像，我需要修复方向。

我已经尝试过这个帖子的解决方案：Component inputs by reference 但是打字稿无法识别FileReaderEvent类型，EXIF不存在，我无法访问imageRotateDegrees，ImageExifRotation...属性。

这是我的代码：

imageChange(input){ if (input.files.length > 0) { var img = document.createElement("img"); img.src = window.URL.createObjectURL(input.files[0]); // Create a FileReader var reader = new FileReader(); var self = this; reader.onload = function (e: any) { img.onload = function() { var resizedImg = self.resize(img); self.model.base64Image = resizedImg; self.picture = resizedImg; } img.src = e.target.result; } reader.readAsDataURL(input.files[0]) } }

【问题讨论】：

你解决过这个问题吗？

标签： angular typescript exif

【解决方案1】：

我为https://github.com/bergben/ng2-img-max#readme 的问题找到了一个 Angular 库，并使用以下代码使它对我有用：

initInputChangeListener() {
    const fileInput = document.getElementById('imageFileInput');
    if (fileInput) {
        fileInput.addEventListener('change', (e: any) => {
            if (e.target.files && e.target.files[0]) {

                const fileReader = new FileReader();
                fileReader.onload = () => {

                    setTimeout(() => {
                        this.base64Image = fileReader.result; 
                        // not sure if you need this
                        // but i had problems without this line of code
                    });

                    setTimeout(() => {
                        let myImage: HTMLImageElement = new Image();
                        myImage.src = fileReader.result;

                        this.ng2ImgMaxService.getEXIFOrientedImage(myImage)
                            .then(result => {
                                console.log('received getEXIFOrientedImage result');

                                let canvas = 
                                    <HTMLCanvasElement> document.getElementById('myCanvas');
                                let context = canvas.getContext('2d');

                                let ratio = result.width / result.height;
                                let w = result.width - 100;
                                let h = (w / ratio);
                                canvas.width = w;
                                canvas.height = h;

                                context.drawImage(result, 0, 0, w, h);
                                let dataUrl = canvas.toDataURL('image/jpeg');

                                setTimeout(() => {
                                    console.log('updating the image...');
                                    this.base64Image = dataUrl;
                                });


                            }, error => {
                                console.warn(error);
                            });
                    });
                };

                fileReader.readAsDataURL(e.target.files[0]);
            }
        });
    }
}

在我使用的模板里面：

<img [src]="base64Image" />
<canvas id="myCanvas" style="display: none;"></canvas>

【讨论】：