获取远程图片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的博客