h5手机拍摄照片总是横着的

2020-07-30 15:11

解决方案:前端开发>Javascript

环境标签:
10.00

最近项目中使用到h5调用手机拍摄照片时发现一个问题。苹果手机会自动横着,不知道怎么判断手机得拍摄方式?有没有好的解决方案?

最佳答案

解决方案

可以试试用exif.js来处理拍摄图片。

 function selectFileImage(fileObj) {
    var file = fileObj.files['0'];
    //图片方向角 added by lzk
            var Orientation = null;
    if (file) {
        console.log("正在上传,请稍后...");
        var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
        if (!rFilter.test(file.type)) {
            alert("请选择jpeg、png格式的图片");
            return;
        }
        // var URL = URL || webkitURL;
        //获取照片方向角属性,用户旋转控制
        EXIF.getData(file, function() {
            EXIF.getAllTags(this); 
            Orientation = EXIF.getTag(this, 'Orientation');
            //return;
        });
        
        var oReader = new FileReader();
        oReader.onload = function(e) {
            //var blob = URL.createObjectURL(file);
            //_compress(blob, file, basePath);
            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
            &nb

嗝屁猫 T1 被采纳率87%
2020-07-30 15:13
打赏 0 0
页面统计
334 访问
0 帮助
0.00 打赏
通知消息
  • 暂无任何消息