修复EXIF方向角度2

Question

如何在Angular 2中修复EXIF方向？我正在从手机上加载图像,我需要修复方向.

我已经尝试过这篇文章的解决方案:组件通过引用输入 但是typecript不能识别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]) } }

Answer 1

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

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>