获取远程图片rotate方法旋转90后兼容当前弹框或者div得方法

发布时间：2020-04-15 13:39:07 修改时间：2020-04-15 13:42:58 阅读：6115 评论：1 0

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

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





图片预览得方向是根据属性获取得，这个在之前文档中提过得exif.js插件得获取方法，这里不再过多陈述：参考文档https://www.no-if.com/Home/Article/index/id/221.html





一、首先我们获取到图片得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 * (img.width / layerWidth)  ;

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

                                __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 * (img.width / layerWidth)  ;

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

                                __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;

                        })





                    });

                }

---