获取远程图片rotate方法旋转90后兼容当前弹框或者div的方法（angular4+环境）

获取远程图片rotate方法旋转90后兼容当前弹框或者div得方法（angular4+环境）

解决办法：通过远程图片得链接地址获取到图片并放入img标签中然后属性，这里通过canvas完成虚拟dom创建并

图片预览得方向是根据属性获取得，这个在之前文档中提过得exif.js插件得获取方法，这里不再过多陈述，参考文档如下：
调整上传图片的预览方向 (exif.js)-Mr.Tang的博客

一、首先我们获取到图片得Orientation属性，

		0 => 0°
		
		6 => 90°
		
		3 => 180°
		
		8 => 270°

二、这里弹框宽度是固定得，高度是自动（auto）属性得弹框（layer）。

我这边弹框得固定宽度为738px，这里可以根据实际情况而定，接下来主要得是两个属性‘弹框高度’、‘图片偏移量’，上html赋值代码

<div  [ngStyle]="{height: maxHeight + 'px'}">
        <img   [ngStyle]="{'width': '100%'  , 'margin-top': -marginTop + 'px','transform': OrientationData} " [src]="img.url|cdnurl">
</div>

以上是layer弹窗之内得内容代码。为什么要设置这两个属性，因为当我们传入一张竖图得时候
也就是高度大于宽度得时候，主要针对图片旋转90°或者270度得时候，都会将图片横过来或者传横图得时候竖过来，这样就导致

高度很高但是有空白区域，而且图片是居中得，所以以下重点讲解计算这两个属性得方法：

1、当宽度大于高度的图片：

弹窗高度：主要思路是：因为图片横过来之后高度变成了旋转后的宽度，所以缩小到738的宽度之后为了保持高度缩小比例一致。

maxHeight（弹窗高度） = img.width（图片宽度） / (img.height（图片高度） / layerWidth（弹框宽度）)

弹窗宽度：主要思路是：因为图片横过来之后高度变成了旋转后的宽度，先计算宽度缩小到738之后的图片实际显示高度，也就是弹框的实际高度，然后减去图片旋转后的实际宽度，由于对称原则除2，就是当前弹框应该向上偏移的实际数值。

marginTop（偏移量） = (img.height（图片高度） / (img.width（图片宽度） / layerWidth（弹窗宽度）) - maxHeight（弹框高度） ) / 2

2、当宽度大于高度的图片：

这里就不多说了直接把上面的公式拿过来宽度和高度调换位置就可以了。

三、通过以上思路，我把项目代码搬过来参考

// 获取图片旋转方向

 const img = document.createElement('img');

const canvas = document.createElement('canvas');

// 获取远程图片地址

img.src = result1[0].url;

// 如需使用toDataURL方法 需要设置crossOrigin 属性

 img.setAttribute('crossOrigin', 'anonymous');

img.onload = function(){

    const context = canvas.getContext('2d');

    context.drawImage(img, 0, 0, img.width, img.height);

    // const dataURL = canvas.toDataURL()

    // console.log(dataURL)

    EXIF.getData( img, function(){

        // 获取图片所有属性

        EXIF.getAllTags(this);

        // 获取图片旋转方向属性

        const Orientation = EXIF.getTag(this, 'Orientation');

        // 弹框容器宽度

        const layerWidth = 738;

        if (Orientation === 6) {

            if (img.height > img.width) {

                __this.maxHeight = img.width / (img.height / layerWidth);

                __this.marginTop = (img.height / (img.width / layerWidth) - __this.maxHeight ) / 2;

                __this.OrientationData = 'rotate(-90deg) scale(' + img.width / img.height + ')';

            }else {

                 __this.maxHeight = img.height * (layerWidth / img.width) ;
                 __this.marginTop = 0;

                __this.OrientationData = 'rotate(-90deg) scale(' + img.height / img.width + ')';

            }

        } else if (Orientation === 3) {

            __this.maxHeight = img.height * (layerWidth / img.width) ;

            __this.marginTop = 0;

            __this.OrientationData = 'rotate(-180deg)';

        } else if (Orientation === 8) {

            if (img.height > img.width) {

                __this.maxHeight = img.width / (img.height / layerWidth);

                __this.marginTop = (img.height / (img.width / layerWidth) - __this.maxHeight ) / 2;

                __this.OrientationData = 'rotate(-270deg) scale(' + img.width / img.height + ')';

            }else {

                __this.maxHeight = img.height * (layerWidth / img.width) ;
                 __this.marginTop = 0;

                __this.OrientationData = 'rotate(-270deg) scale(' + img.height / img.width + ')';

            }

        }else {

            __this.maxHeight = img.height * (layerWidth / img.width) ;

            __this.marginTop = 0;

            __this.OrientationData = 'rotate(0deg)';

        }

        // 赋值图片数据src

        __this.ngzone.run(() => {

            __this.telecontrolScreens = result1;

        })




    });

}