javascript - 苹果手机上传拍照竖图生成的图片是横向图，处理时又遇到手机加载不上图片，求助

问题描述

问 题

需求：
1 移动端项目
2 可上传多张图片，图片前端压缩后再上传（怕直接上传图片太大影响上传速度）

问题：
ios手机上传竖图会显示成横图（处理办法：读取图片，判断exif的方向值，根据方向值前端用canvas旋转图片）

问题：
读取图片时，电脑可以onload，可是手机onload不起作用，猜想是因为图片太大？

求助，感谢！

choose.addEventListener('change', function () {
    if (!this.files.length) return;
    var files = Array.prototype.slice.call(this.files);
    if (files.length > 9) {
        alert("最多同时只可上传9张图片");
        return;
    }
    files.forEach(function (file, i) {
        if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
        var reader = new FileReader();
        var li = document.createElement("li");
        //获取图片大小
        var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) +
            "KB";
        li.innerHTML =
            '<span onclick="delImg(this.parentNode)" class="del">删除</span><span class="succ">上传成功</span><span class="progress"><i></i></span>';
        postimg.appendChild(li);
        reader.onload = function () {
            var result = this.result;
            var img = new Image();
            img.src = result;
 
 
            var rotateshow;
 
            alert(111)//这里可以执行
            img.onload = function () {
                alert(222)//这里电脑可以执行，手机执行不了
                EXIF.getData(this, function () {
 
                    EXIF.getAllTags(this);
                    Orientation = EXIF.getTag(this, 'Orientation');
                    console.log('dir:' + Orientation)
 
                    switch (Orientation) {
                    case 6:
                        //需要顺时针（向左）90度旋转
                        rotateshow = rotateImg(this, 'left');
                        break;
                    case 8:
                        //需要逆时针（向右）90度旋转
                        rotateshow = rotateImg(this, 'right');
                        break;
                    case 3:
                        //需要180度旋转
                        rotateImg(this, 'right'); //转两次 
                        rotateshow = rotateImg(this, 'right');
                        break;
                    default:
                        rotateshow = result;
                        break;
                    }
                });
                li.style.backgroundImage = "url(" + rotateshow + ")";
            }
 
            //li.style.backgroundImage = "url(" + result + ")";
            li.setAttribute('type', file.type)
 
            if (compresssign) {
                //如果图片大小小于500kb，则直接上传
                if (result.length <= maxsize) {
                    img = null;
                    //upload(result, file.type, $(li));
                    return;
                }
                //图片加载完毕之后进行压缩，然后上传
                if (img.complete) {
                    callback();
                } else {
                    img.onload = callback;
                }
 
                function callback() {
                    var data = compress(img);
                    //upload(data, file.type, $(li));
                    img = null;
                }
            } else {
                img = null;
                return;
            }
        };
        reader.readAsDataURL(file);
 
 
    })
});

解决方案

最后用的办法是，把图片写入页面，用CSS让用户看不到这个图片，在js里图片onload就可以了

这篇关于javascript - 苹果手机上传拍照竖图生成的图片是横向图，处理时又遇到手机加载不上图片，求助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！