html5 IOS端上传图片角度旋转

fou7 发布于2019-06-25 16:03 / 1119人阅读

摘要：前言近期有个手机端上传图片功能的项目，在手机上体验很好但在手机上，图片有时会出现角度旋转。页面是获取图片角度的插件图片方向角检查图片格式请选择格式的图片获取照片方向角属性需要顺时针度旋转需要逆时针度旋转需要度旋转

前言

近期有个手机端html5上传图片功能的项目，在android手机上体验很好但在IOS手机上，图片有时会出现角度旋转。google后找到了解决方法，现在总结下供以后使用。

html页面

exif.js是获取图片角度的javascript插件

uploadImage.js

$(".uploadImage input").change(function () {
    selectFileImage($(this)[0]);
});

function selectFileImage(fileObj) {
    var file = fileObj.files[0];
    // 图片方向角
    var Orientation = null;

    if (file) {
        var rFilter = /^(image/jpeg|image/png)$/i; // 检查图片格式

        if (!rFilter.test(file.type)) {
            alert("请选择jpeg、png格式的图片");
            return;
        }
        //获取照片方向角属性
        EXIF.getData(file, function () {
            EXIF.getAllTags(this);
            Orientation = EXIF.getTag(this, "Orientation");
        });
    }
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var image = new Image();
        image.src = e.target.result;
        image.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight);
            var base64 = null;
            if (Orientation != "" && Orientation != 1 && Orientation != undefined) {
                var width = this.naturalWidth;
                var height = this.naturalHeight;
                switch (Orientation) {
                    case 6://需要顺时针90度旋转
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(90 * Math.PI / 180);
                        ctx.drawImage(this, 0, -height);
                        break;
                    case 8://需要逆时针90度旋转
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(-90 * Math.PI / 180);
                        ctx.drawImage(this, -width, 0);
                        break;
                    case 3://需要180度旋转
                        ctx.rotate(180 * Math.PI / 180);
                        ctx.drawImage(this, -width, -height);
                        break;
                }
            }
            base64 = canvas.toDataURL("image/png");
            $("#myImage").attr("src", base64);
        };
    };
}

私有云服务器托管上传图片旋转图像识别旋转角度计算手机端上传图片安卓端上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/16680.html

html5 IOS端上传图片角度旋转

摘要：前言近期有个手机端上传图片功能的项目，在手机上体验很好但在手机上，图片有时会出现角度旋转。页面是获取图片角度的插件图片方向角检查图片格式请选择格式的图片获取照片方向角属性需要顺时针度旋转需要逆时针度旋转需要度旋转前言近期有个手机端html5上传图片功能的项目，在android手机上体验很好但在IOS手机上，图片有时会出现角度旋转。google后找到了解决方法，现在总结下供以后使用。...

Vultr 2019-08-05 10:59 评论0 收藏0
html5 IOS端上传图片角度旋转

摘要：前言近期有个手机端上传图片功能的项目，在手机上体验很好但在手机上，图片有时会出现角度旋转。页面是获取图片角度的插件图片方向角检查图片格式请选择格式的图片获取照片方向角属性需要顺时针度旋转需要逆时针度旋转需要度旋转前言近期有个手机端html5上传图片功能的项目，在android手机上体验很好但在IOS手机上，图片有时会出现角度旋转。google后找到了解决方法，现在总结下供以后使用。...

DDreach 2019-08-20 15:24 评论0 收藏0
html5 上传本地图片处理各种问题

摘要：原文还是在简书上上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子上传手机本地图片，然后裁剪后加的需求能够旋转图片，用于裁剪后面加的需求填写各种文字，选择颜色，之后把文字和个相关的图片，水印到裁剪的图片上，上传服务器生成原文还是在简书上： html5 上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子：1.上传手机本地图片，然后裁剪（后加的需...

iOS122 2019-08-19 17:16 评论0 收藏0
html5 上传本地图片处理各种问题

摘要：原文还是在简书上上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子上传手机本地图片，然后裁剪后加的需求能够旋转图片，用于裁剪后面加的需求填写各种文字，选择颜色，之后把文字和个相关的图片，水印到裁剪的图片上，上传服务器生成原文还是在简书上： html5 上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子：1.上传手机本地图片，然后裁剪（后加的需...

codeGoogle 2019-08-02 18:27 评论0 收藏0
html5 上传本地图片处理各种问题

摘要：原文还是在简书上上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子上传手机本地图片，然后裁剪后加的需求能够旋转图片，用于裁剪后面加的需求填写各种文字，选择颜色，之后把文字和个相关的图片，水印到裁剪的图片上，上传服务器生成原文还是在简书上： html5 上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子：1.上传手机本地图片，然后裁剪（后加的需...

Taste 2019-08-01 14:59 评论0 收藏0