微信网页IOS上传图片旋转解决方案

Posted 2020-09-23 追逐梦想的蜗牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信网页IOS上传图片旋转解决方案相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>分享</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../Resource/css/mui.min.css">
    <script src="../../Resource/js/mui.min.js"></script>
    <link href="../../Resource/layer_mobile/need/layer.css" rel="stylesheet" />
    <script src="../../Resource/layer_mobile/layer.js"></script>
    <script src="../../Resource/js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../Resource/js/exif.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    <script src="../../Resource/weixin/hyx_base.js"></script>
    <script src="../../Resource/weixin/WeiXinShare.js"></script>
    <style>
        body {
            background: #F5F5F5;
        }

        .mui-content {
            background: #f5f5f5;
        }

        .mui-input-row {
            margin-top: 10px;
            background: #fff;
            padding: 10px;
        }

        textarea {
            border: none;
        }

        .chuan {
            width: 50px;
            height: 50px;
        }

        .del {
            position: relative;
            top: -39px;
            left: -14px;
            width: 15px;
        }

        footer {
            position: fixed;
            bottom: 0px;
            color: #fff;
            background: #01BF3A;
            width: 100%;
            padding: 12px 0px;
            text-align: center;
            font-size: 17px;
            border-top: 1px solid #eee;
        }
    </style>
</head>

<body>

    <div class="mui-input-row">
        <textarea id="textarea" rows="5" placeholder="一起聊聊生活把"></textarea>
    </div>
    <div class="mui-input-row" id="ImgList">
        <img class="chuan" id="imgUpload" src="../../Resource/img/shangcaun.png" />
        <input type="file" id="fileToUpload" name="upfile" style=" display:none;" />
    </div>
    <footer id="Add">发送</footer>

    <script type="text/javascript">
        var browser = {
            versions: function () {
                var a = navigator.userAgent, b = navigator.appVersion;
                return {
                    trident: a.indexOf("Trident") > -1, presto: a.indexOf("Presto") > -1,
                    webKit: a.indexOf("AppleWebKit") > -1, gecko: a.indexOf("Gecko") > -1 && a.indexOf("KHTML") == -1,
                    mobile: !!a.match(/AppleWebKit.*Mobile.*/), ios: !!a.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                    android: a.indexOf("Android") > -1 || a.indexOf("Linux") > -1, iPhone: a.indexOf("iPhone") > -1,
                    iPad: a.indexOf("iPad") > -1, webApp: a.indexOf("Safari") == -1
                }
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        };


        var openid = getCookie("openid");
        var fileUrl = "";
        $(function () {
            initJSAPI();
            if (openid == undefined || openid == "" || openid == null || openid == "null") {
                var code = getQueryString("code");
                if (code == null) {
                    JumpToOauth();
                } else {
                    initOpenid(code);
                }
            } else {
                GetUserInfo(openid);

            }

        });
        function initOpenid(code) {
            $.ajax({
                type: "POST",
                timeout: 80000,
                url: "../../GetJsApi/GetOpenid",
                dataType: "text",
                data: { "code": code },
                beforeSend: function (XMLHttpRequest) {

                },
                success: function (msg) {
                    //获取相应的值，并存放到cookie中去
                    if (msg == undefined || msg.length == 0) {
                    } else {
                        openid = msg;
                        setCookie("openid", msg, 1);
                        GetUserInfo(openid);
                    }
                },
                complete: function (XMLHttpRequest, textStatus) {
                    if (textStatus == ‘timeout‘) {
                        //超时,status还有success,error等值的情况
                        alert("请求超时,请返回重试");
                    }
                },
                error: function (err) {
                    console.log("数据加载失败");
                }
            });
        }
        //获取微信用户是否关注公众号
        function GetUserInfo(openid) {
            $.ajax({
                type: "POST",
                timeout: 80000,
                url: "../../GetJsApi/WeChatIsFollow",
                dataType: "json",
                data: { "openid": openid },
                beforeSend: function (XMLHttpRequest) {

                },
                success: function (msg) {
                    if (msg[0].STATUS != "Y") {
                        ShowQrcode();
                    }
                },
                complete: function (XMLHttpRequest, textStatus) {
                    if (textStatus == ‘timeout‘) {
                        //超时,status还有success,error等值的情况
                        layerPrompt("请求超时,请返回重试");
                    }
                },
                error: function (err) {
                    layerPrompt("数据加载失败");
                }
            });
        }


        //上传图片
        $("#imgUpload").click(function () {
            $("#fileToUpload").click();

        })
        window.setInterval(function () {
            console.log($("#fileToUpload").val());
            if (fileUrl != $("#fileToUpload").val()) {
                fileUrl = $("#fileToUpload").val();
                if (fileUrl != "" && fileUrl != undefined) {
                    layer.open({
                        type: 2,
                        shadeClose: false,
                        content: ‘正在上传...‘
                    });
                    uploadBtnClick();
                }
            }
        }, 1000)

        /********************************
        上传图片
        */
        function uploadBtnClick() {
            var scope = this;
            // change pic to base64
            if (window.File && window.FileReader && window.FileList && window.Blob) {
                var filefield = document.getElementById(‘fileToUpload‘),
                    file = filefield.files[0];
                //IOS
                if (browser.versions.ios) {
                    //获取图片的相关信息
                    EXIF.getData(file, function () {
                        EXIF.pretty(this);
                        var Orientation = EXIF.getTag(this, ‘Orientation‘);
                        processfile(file, uploadCompressFile, scope, Orientation);
                        alert(Orientation);
                    });
                    //Android
                } else if (browser.versions.android) {
                    processfile(file, uploadCompressFile, scope, 1);
                }
            } else {
                alert("此浏览器不完全支持上载图片");
            }
        }
        function processfile(file, uploadCompressFile, scope, Orientation) {
            var reader = new FileReader();
            reader.onload = function (event) {
                var blob = new Blob([event.target.result]);
                window.URL = window.URL || window.webkitURL;
                var blobURL = window.URL.createObjectURL(blob);

                var image = new Image();
                image.src = blobURL;
                image.onload = function () {
                    var resized = resizeMe(image, Orientation);
                    newImg = resized;
                    uploadCompressFile.apply(scope);
                }
            };
            reader.readAsArrayBuffer(file);
        }
        //压缩图片
        function resizeMe(img, Orientation) {
            //压缩的大小
            var max_width = 500;
            var max_height = 375;
            var iSxz = true;
            var canvas = document.createElement(‘canvas‘);
            var width = img.width;
            var height = img.height;
            if (width > height) {
                if (width > max_width) {
                    height = Math.round(height *= max_width / width);
                    width = max_width;
                }
            }
            else {
                if (height > max_height) {
                    width = Math.round(width *= max_height / height);
                    height = max_height;
                }
            }
            //跳转图片大小
            if (Orientation == 6) {
                canvas.width = height;
                canvas.height = width;
            } else {
                canvas.width = width;
                canvas.height = height;
            }
            var ctx = canvas.getContext("2d");
            //旋转图片
            if (Orientation == 6) {
                ctx.save();
                ctx.translate(height / 2, width / 2);
                ctx.rotate(90 * Math.PI / 180.0);
                ctx.drawImage(img, -width / 2, -height / 2, width, height);
            } else {
                ctx.drawImage(img, 0, 0, width, height);
            }
            //压缩率（返回base64编码）
            return canvas.toDataURL("image/png", 0.1);
        }

        //上传图片
        function uploadCompressFile() {
            $.ajax({
                type: "post",
                timeout: 80000,
                async: false,
                url: "../../FileUpload/FileImg",
                dataType: "text",
                data: { "BaseImg": newImg },
                beforeSend: function (XMLHttpRequest) {
                },
                success: function (msg) {
                    if (msg != "") {

                        var Image = "http://www.huiyexing.cn" + msg; //"http://hz.huiyexing.cn" +

                        layer.closeAll();
                        $("#imgUpload").before("<img class=‘chuan NewImg‘ src=‘" + Image + "‘  /><img class=‘del‘ src=‘../../Resource/img/deldeldel.png‘  />")
                        var Imglist = $("#ImgList").find(".NewImg");
                        if (Imglist.length == 9) {
                            $("#imgUpload").hide();
                        } else {
                            $("#imgUpload").show();
                        }
                        $(".del").click(function () {
                            $(this).prev().remove();
                            $(this).remove();
                            $("#imgUpload").show();
                        });
                        $("#fileToUpload").val("");
                    }
                },
                complete: function (XMLHttpRequest, textStatus) {
                    if (textStatus == ‘timeout‘) {
                        //超时,status还有success,error等值的情况
                        layerPrompt("请求超时,请返回重试");
                    }
                },
                error: function (err) {
                    layerPrompt("数据加载失败");
                }
            });
        }


        //Add
        function AddCircle() {
            var Content = escape($("#textarea").val());
            if (Content == "") {
                layerPrompt("请输入");
                return;
            }
            var imgListUrl = "";
            var imgList = $("#ImgList").find(".NewImg");
            $(imgList).each(function () {
                imgListUrl += $(this).attr("src") + ",";
            })
            if (imgListUrl != "") {
                imgListUrl = imgListUrl.substring(0, imgListUrl.length - 1);
            }
            $.ajax({
                type: "POST",
                timeout: 80000,
                url: "../../Circle/AddCircle",
                dataType: "text",
                data: { "openid": openid, "Content": Content, "ContentImges": imgListUrl },
                beforeSend: function (XMLHttpRequest) {

                },
                success: function (msg) {
                    if (msg == "true") {
                        window.location.href = "Index.html";
                    } else {
                        layerPrompt("操作失败");
                    }
                },
                complete: function (XMLHttpRequest, textStatus) {
                    if (textStatus == ‘timeout‘) {
                        //超时,status还有success,error等值的情况
                        layerPrompt("请求超时,请返回重试");
                    }
                },
                error: function (err) {
                    layerPrompt("数据加载失败");
                }
            });
        }
        $("#Add").click(function () {
            AddCircle();
        })
    </script>
</body>

</html>
以上是关于微信网页IOS上传图片旋转解决方案的主要内容，如果未能解决你的问题，请参考以下文章
APICloud开发者进阶之路| JS利用H5的canvas操作微信浏览器上传图片方向旋转
移动端网页上传图片功能简析（主要应用场景为微信公众号）
HTML5网页录音和上传到服务器，支持PCAndroid，支持IOS微信
ios系统竖屏拍照 canvas处理后图片旋转（利用exif.js解决ios手机上传竖拍照片旋转90度问题）
html5 IOS端上传图片角度旋转