美文网首页
解决移动端H5页面 竖屏拍照上传图片时旋转问题

解决移动端H5页面 竖屏拍照上传图片时旋转问题

作者: GOGO_50f8 | 来源:发表于2019-08-27 17:42 被阅读0次

···

首先引入exif.js文件,可通过 npm install exif-js --save 下载
<body>
    <label>照相机</label>
    <input type="file" accept="image/*" onchange="selectFileImage(this);" />
    <img src="" id="img" width="200px">
</body>
<script src="exif.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var file = document.querySelector('input');
    var img_show = document.getElementById('img');
    var box = document.getElementById('box');
    function selectFileImage(fileObj) {
        var file = fileObj.files['0'];
        //图片方向角 added by lzk  
        var Orientation = null;
        if (file) {
            var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式  
            if (!rFilter.test(file.type)) {
                //showMyTips("请选择jpeg、png格式的图片", false);  
                return;
            }
            //获取照片方向角属性,用户旋转控制  
            EXIF.getData(file, function() {
                EXIF.getAllTags(this);
                Orientation = EXIF.getTag(this, 'Orientation');
            });
            var oReader = new FileReader();
            oReader.onload = function(e) {
                var image = new Image();
                image.src = e.target.result;
                image.onload = function() {
                    var expectWidth = this.naturalWidth;
                    var expectHeight = this.naturalHeight;

                    if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
                        expectWidth = 800;
                        expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
                    } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
                        expectHeight = 1200;
                        expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
                    }
                    var canvas = document.createElement("canvas");
                    var ctx = canvas.getContext("2d");
                    canvas.width = expectWidth;
                    canvas.height = expectHeight;
                    ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
                    var base64 = null;
                    //修复ios  
                    if (navigator.userAgent.match(/iphone/i)) {

                        //如果方向角不为1,都需要进行旋转 added by lzk  
                        if (Orientation != "" && Orientation != 1) {
                            // alert('旋转处理');  
                            switch (Orientation) {
                                case 6: //需要顺时针(向左)90度旋转  
                                    // alert('需要顺时针(向左)90度旋转');  
                                    rotateImg(this, 'left', canvas);
                                    break;
                                case 8: //需要逆时针(向右)90度旋转  
                                    // alert('需要顺时针(向右)90度旋转');  
                                    rotateImg(this, 'right', canvas);
                                    break;
                                case 3: //需要180度旋转  
                                    // alert('需要180度旋转');  
                                    rotateImg(this, 'right', canvas); //转两次  
                                    rotateImg(this, 'right', canvas);
                                    break;
                            }
                        }
                        base64 = canvas.toDataURL("image/jpeg", 0.8);
                    } else {

                        console.log(Orientation)
                        if (Orientation != "" && Orientation != 1) {
                            //alert('旋转处理');  
                            switch (Orientation) {
                                case 6: //需要顺时针(向左)90度旋转  
                                    // alert('需要顺时针(向左)90度旋转');  
                                    rotateImg(this, 'left', canvas);
                                    break;
                                case 8: //需要逆时针(向右)90度旋转  
                                    // alert('需要顺时针(向右)90度旋转');  
                                    rotateImg(this, 'right', canvas);
                                    break;
                                case 3: //需要180度旋转  
                                    // alert('需要180度旋转');  
                                    rotateImg(this, 'right', canvas); //转两次  
                                    rotateImg(this, 'right', canvas);
                                    break;
                            }
                        }
                        base64 = canvas.toDataURL("image/jpeg", 0.8);
                    }

                    img_show.src = base64;
                    console.log("上传完成,请稍后...");

                };
            };
            oReader.readAsDataURL(file);
        }
    }
    //对图片旋转处理   
    function rotateImg(img, direction, canvas) {

        //最小与最大旋转方向,图片旋转4次后回到原方向   
        var min_step = 0;
        var max_step = 3;
        //var img = document.getElementById(pid);    
        if (img == null) return;
        //img的高度和宽度不能在img元素隐藏后获取,否则会出错    
        var height = img.height;
        var width = img.width;
        var step = 2;
        if (step == null) {
            step = min_step;
        }
        if (direction == 'right') {
            step++;
            //旋转到原位置,即超过最大值    
            step > max_step && (step = min_step);
        } else {
            step--;
            step < min_step && (step = max_step);
        }
        var degree = step * 90 * Math.PI / 180;
        var ctx = canvas.getContext('2d');
        switch (step) {
            case 0:
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0);
                break;
            case 1:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, 0, -height);
                break;
            case 2:
                canvas.width = width;
                canvas.height = height;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, -height);
                break;
            case 3:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, 0);
                break;
        }
    }
</script>

···

相关文章

网友评论

      本文标题:解决移动端H5页面 竖屏拍照上传图片时旋转问题

      本文链接:https://www.haomeiwen.com/subject/yjfyectx.html