iphone的Safari浏览器中HTML5上传图片方向问题解决方法

JavaScript 同时被 3 个专栏收录
85 篇文章 0 订阅
22 篇文章 0 订阅
57 篇文章 0 订阅

前段时间在上传图片的时候前端使用FileReader将图片读到内存,使用canvas进行压缩,然后上传,在安卓手机上没有问题,但是在iphone的Safari浏览器中一直存在图片方向不正的问题,经过多方面检查才明白,原因可以查看此处:图片方向有误的原因

接下来来说解决方案:

首先可以使用GitHub上的exif.jsexif.js的翻译)来读取图片的Orientation 元数据,在根据下面这张图进行方向调整就OK了:

Exif方向标记值

下面主要把代码处理的关键位置展示出来,很多其他限制需要自行解决:

$("#uploaderInput").on("change", function (e) {
    var files = e.target.files,
        canvasTemp = $("#canvasTemp")[0];

    for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];
        EXIF.getData(file, function (file) {
            var _this = this,
                orientation = EXIF.getTag(_this, 'Orientation'),
                reader = new FileReader();
            reader.readAsDataURL(_this);
            reader.onload = function () {
                var imgTemp = new Image();
                imgTemp.src = this.result;
                imgTemp.onload = function () {
                    var thisImg = this;
                    var ctx = canvasTemp.getContext("2d");
                    var degree = 0,
                        drawWidth = sWidth,  // sWidth图片宽度
                        canvasWidth = sWidth,
                        drawHeight = sHeight, // sWidth图片高度
                        canvasHeight = sHeight;

                    if (orientation) {
                        //判断图片方向,重置canvas大小,确定旋转角度,iphone默认的是home键在右方的横屏拍摄方式
                        switch (orientation) {
                            //iphone横屏拍摄,此时home键在左侧
                            case 3:
                                degree = 180;
                                drawWidth = -sWidth;
                                drawHeight = -sHeight;
                                break;
                            //iphone竖屏拍摄,此时home键在下方(正常拿手机的方向)
                            case 6:
                                canvasWidth = sHeight;
                                canvasHeight = sWidth;
                                degree = 90;
                                drawWidth = sWidth;
                                drawHeight = -sHeight;
                                break;
                            //iphone竖屏拍摄,此时home键在上方
                            case 8:
                                canvasWidth = sHeight;
                                canvasHeight = sWidth;
                                degree = 270;
                                drawWidth = -sWidth;
                                drawHeight = sHeight;
                                break;
                        }
                    }

                    // canvas清屏  
                    ctx.clearRect(0, 0, canvasTemp.width, canvasTemp.height);
                    // 重置canvas宽高  
                    canvasTemp.width = canvasWidth;
                    canvasTemp.height = canvasHeight;

                    //使用canvas旋转校正
                    ctx.rotate(degree * Math.PI / 180);
                    ctx.fillStyle = '#ffffff';
                    ctx.fillRect(0, 0, drawWidth, drawHeight);
                    ctx.drawImage(thisImg, 0, 0, drawWidth, drawHeight);
                    // 如果是jpeg/webp图片,可设置图片质量,png图片不能设置质量
                    var quantity = thisImg.src.length > (1024 * 1024) ? 0.8 : 1.0;
                    // 导出图片的base64
                    var dataUrl = canvasTemp.toDataURL('image/jpeg', quantity);

                    // 在页面中直接用此处导出的base64填充图片的src,并且上传的时候上传base64格式,或者是将base64转成Blob上传
                    
                    // base64转Blob
                    // function dataURLtoBlob(base64Data) {
                    //     var parts = base64Data.split(';base64,');
                    //     var contentType = parts[0].split(':')[1];
                    //     var raw = window.atob(parts[1]);
                    //     var rawLength = raw.length;
                    //     var uInt8Array = new Uint8Array(rawLength);
                    //     for (var i = 0; i < rawLength; ++i) {
                    //         uInt8Array[i] = raw.charCodeAt(i);
                    //     }
                    //     return new Blob([uInt8Array], { type: contentType });
                    // }
                }
            }
        });
    }
});

实际上是iphone或者是支持带方向传感器的数码相机拍出来的照片都会带有Orientation 方向元数据,所以不管是在PC端还是移动端,都是需要加上面这段代码进行图片翻转的。

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

樊小书生

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值