获取远程图片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;
})
});
}
文章转自个人博客地址：Mr.Tang的博客