最近项目中遇到拍照,预览上传的问题,苹果手机不兼容,拍照旋转90度,在网上查找出好多方法,都无效,最后用input调用相机,然后用canvas画布裁剪照片,压缩保存,代码如下。

<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection" content="telephone=no, email=no" />
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="HandheldFriendly" content="true">
        <meta name="MobileOptimized" content="640">
        <meta name="screen-orientation" content="portrait">
        <meta name="x5-orientation" content="portrait">
        <meta name="full-screen" content="yes">
        <meta name="x5-fullscreen" content="true">
        <meta name="browsermode" content="application">
        <meta name="x5-page-mode" content="app">
        <!--<base href="__ROOT__/Public/syh/shy_5/" />-->
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
        <script src="js/sexif.j"></script>
        <script src="js/jquery-2.1.4.min.js"></script>
        <title>H5拍照预览压缩保存文件</title>  
    </head>

<body>

<img id="imgss" src="img/6/4.jpg" class="ani  p6_element4" />        // 预览

<img src="img/6/8.png" id='uploadBtn' class="ani p6_save" />            //保存

<input type="file" name="fileToUpload" id="fileToUpload" accept="image/*" capture="camera" οnclick="hint()" ;/>      //调用相机
                    <input type="hidden" id="pid" value="{$pid}" />
                    <canvas id="canvas" width="374" height="544" style="display: none;"></canvas>
                    <input type="hidden" id="url" value="__URL__" />
                    <textarea id="compressValue" hidden></textarea>
                    <div id="upp">
                        <div class="spinner">
                            <div class="spinner-container container1">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                            <div class="spinner-container container2">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                            <div class="spinner-container container3">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                        </div>
                    </div>

<script type="text/javascript">
            function hint() {
                alert("请您竖屏拍照!")
            }
        </script>
        <script>
            var post_flag = false; //设置一个对象来控制是否进入AJAX过程

function post(preview, pid, url) {

if(post_flag) return; //如果正在提交则直接返回,停止执行

post_flag = true; //标记当前状态为正在提交状态

$.ajax({
                    url: url + "/ajax",
                    type: "POST",
                    data: {
                        'imgBase64': preview,
                        'pid': pid
                    },
                    dataType: 'json',
                    beforeSend: function() {
                        $('#upp').show();
                        $('#uploadBtn').hide();
                    },
                    success: function(data) {
                        if(data=='上传成功!'){
                            post_flag = false;
                            $("#upp").hide();
                        }else{
                            post_flag = false;
                            $("#upp").hide();
                            alert(data);
                        }
                    },
                    error: function() {
                        alert('操作失败,请跟技术联系');
                    }
                });
            }

//提交click事件
            $('#uploadBtn').click(function() {
                var preview = document.getElementById('compressValue').value;
                var pid = document.getElementById('pid').value;
                var url = document.getElementById('url').value;
                if(preview) {
                    post(preview, pid, url);
                }
            });

function getObjectURL(file) {
                var url = null;
                if(window.createObjectURL != undefined) { // basic
                    url = window.createObjectURL(file);
                } else if(window.URL != undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file);
                } else if(window.webkitURL != undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file);
                }
                return url;
            }

$('#fileToUpload').change(function() {
                var Orientation = null;

var canvas = document.getElementById('canvas');
                var dd = canvas.getContext('2d');
                var file = this.files[0];
                var imgsrc = getObjectURL(file);
                var img = new Image();
                img.src = imgsrc;

img.onload = function() {              
                    if(navigator.userAgent.match(/iphone/i) || navigator.userAgent.match(/SM-/i)) {
                        EXIF.getData(file, function() {
                            var canvas = document.getElementById('canvas');
                            var dd = canvas.getContext('2d');
                            //            alert(EXIF.pretty(this));
                            //            EXIF.getAllTags(this); 
                            //                    alert(EXIF.getTag(this, 'Orientation'));
                            Orientation = EXIF.getTag(this, 'Orientation');
                             
                            if(Orientation != "" && Orientation != 1) { 
                                switch(Orientation) {
                                    case 6: //三星竖拍
                                        dd.save();
                                        dd.translate(374 / 2, 544 / 2);
                                        dd.rotate(90 * Math.PI / 180);
                                        // var xs=(544/374)+0.01;
                                        // dd.scale(xs,xs);//  照片放在相框下面,上面用overflow
                                        if(navigator.userAgent.match(/SM-/i)) {
                                            dd.scale(2.5, 1);
                                        } else {
                                            dd.scale(1.94, 1);
                                        }
                                       
                                        dd.drawImage(img, 0, 0, img.width, img.height, -187, -272, 374, 544);
                                        
                                        base64 = canvas.toDataURL('image/jpeg', 0.4);

dd.restore();
                                        $("#uploadBtn").show();
                                        $('#imgss').attr('src', base64);
                                     // postbase = base64.substr(22);
                                        $('#compressValue').val(base64);
                                        break;
                                    case 8:
                                        dd.save();
                                        dd.translate(374 / 2, 544 / 2);
                                        dd.rotate(-90 * Math.PI / 180);
                                        // var xs=(544/374)+0.01;
                                        // dd.scale(xs,xs);//  照片放在相框下面,上面用overflow
                                        dd.scale(1.94, 1);

dd.drawImage(img, 0, 0, img.width, img.height, -187, -272, 374, 544);
                                        base64 = canvas.toDataURL('image/jpeg', 0.4);

dd.restore();
                                        $("#uploadBtn").show();
                                        $('#imgss').attr('src', base64);
                                        //postbase = base64.substr(22);
                                        $('#compressValue').val(base64);
                                        break;
                                    case 3:
                                        alert(3);
                                        dd.save();
                                        dd.translate(374 / 2, 544 / 2);
                                        dd.rotate(180 * Math.PI / 180);
                                        //                        var xs=(544/374)+0.01;
                                        //                        dd.scale(xs,xs);//  照片放在相框下面,上面用overflow
                                        dd.scale(1.94, 1);

dd.drawImage(img, 0, 0, img.width, img.height, -187, -272, 374, 544);
                                        base64 = canvas.toDataURL('image/jpeg', 0.4);

dd.restore();
                                        $("#uploadBtn").show();
                                        $('#imgss').attr('src', base64);
//                                        postbase = base64.substr(22);
                                        $('#compressValue').val(base64);

break;
                                }

} else {
                                var canvas = document.getElementById('canvas');
                                var dd = canvas.getContext('2d');
                                var sx, sy, sw, sh;
                                var d_kgb = 374 / 544;
                                var s_kgb = img.width / img.height;

if(s_kgb > d_kgb) {
                                    sw = parseInt(img.height * d_kgb);
                                    sx = parseInt((img.width - sw) / 2);
                                    sy = 0;
                                    sh = img.height;

} else if(s_kgb < d_kgb) {
                                    sh = img.width / d_kgb;
                                    sy = (img.height - sh) / 2;
                                    sx = 0;
                                    sw = img.width;
                                    //                alert(sx+"|"+sy+"|"+sw+"|"+sh);
                                } else {
                                    sx = 0, sy = 0, sw = img.width, sh = img.height;
                                }
                                
                                dd.drawImage(img, sx, sy, sw, sh, 0, 0, 374, 544);
                                dd.clearRect(10,10,300,100);
                                base64 = canvas.toDataURL('image/jpeg', 0.4);
                                 
                                 $("#uploadBtn").show();
                                $('#imgss').attr('src', base64);
                            //    postbase = base64.substr(22);
                                $('#imgbase').val(base64);
                            }
                        });
                    }

var sx, sy, sw, sh;
                        var d_kgb = 374 / 544;
                        var s_kgb = img.width / img.height;

if(s_kgb > d_kgb) {
                            sw = parseInt(img.height * d_kgb);
                            sx = parseInt((img.width - sw) / 2);
                            sy = 0;
                            sh = img.height;

} else if(s_kgb < d_kgb) {
                            sh = img.width / d_kgb;
                            sy = (img.height - sh) / 2;
                            sx = 0;
                            sw = img.width;
                            //                alert(sx+"|"+sy+"|"+sw+"|"+sh);
                        } else {
                            sx = 0, sy = 0, sw = img.width, sh = img.height;
                        }
                        dd.drawImage(img, sx, sy, sw, sh, 0, 0, 374, 544);
//                      dd.clearRect(30,30,500,200);
                        base64 = canvas.toDataURL('image/jpeg', 0.4);
                        
               $("#uploadBtn").show();
                    $('#imgss').attr('src', base64);
                    //postbase = base64.substr(22);
                    $('#compressValue').val(base64);
                };
            });
        </script>
    </body>

</html>


想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!

H5调用相机,裁剪,压缩照片相关推荐

  1. 关于调用系统相机以及压缩照片

    style="DISPLAY: none" frameborder="0"> style="Z-INDEX: 9999; POSITION: a ...

  2. H5调用本地摄像头拍摄照片

    前言 最近项目中需要H5调用本地摄像头拍照的需求. 代码 <canvas id="canvasCemara" width="500" height=&qu ...

  3. Android调用相机拍照,照片被旋转的问题

    问题描述:最近在做毕设,想在我的天气APP中加入一个添加图片水印的小功能,首先就是学习了郭霖老师的调用相机并显示的功能.起先是在华为的手机上调试(是一个我刚换下来的手机mate7)图片没有问题,可以正 ...

  4. 安卓图片操作(调用系统相机,预览本地照片,调用系统裁剪图片,压缩图片,中心裁剪方形图片,bitmap转byte[])

    先创建照片存储uri public static Uri createImagePathUri(Context context) {Uri imageFilePath = null;String st ...

  5. h5 调用ios原生相机拍照上传照片

    1.html中的点击按钮和回调显示标签---------------直接上代码 <!DOCTYPE html> <html lang="en"> <h ...

  6. H5调用本地相册/相机上传图片

    在开发中有时候会用到H5调用本地图片或者相机,像第三方的实名认证,在线客服等等都需要上传图片.H5中只需要通过<input>调用即可,ios是可以的实现的,不需要自己处理,除非客户端压缩图 ...

  7. H5调用手机摄像头拍照,如何压缩后上传

    H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...

  8. cocos creator 调用相机相册裁剪图片并上传到服务器

    大致思路就是creator里面js调用Java和object-c代码,调起系统相机相册,选取图库图片/拍照图片进行裁剪,然后转化为base64字符串,最后通过http post请求上传到服务器. Ja ...

  9. 深坑之Webview,解决H5调用android相机拍照和录像

    最近在开发过程中遇到一个问题,主要是调用第三方的实名认证,需要拍照和录像; 办过支付宝大宝卡和腾讯的大王卡的都知道这玩意,办卡的时候就需要进行实名认证,人脸识别; 本来第三方平台(xxx流量公司)说的 ...

最新文章

  1. 把.sql文件上传到服务器上
  2. 推荐一些顶级的开源CI/CD工具
  3. 年轻人,别动不动就想搞个“大社交”,工具型社交才是正路子
  4. 关于出去还是不出去的选择
  5. IOCP配合AcceptEx的例子
  6. Linux网络流量实时监控ifstat iftop命令详解
  7. 科大奥锐实验报告霍尔效应_大学物理实验报告系列之霍尔效应
  8. 常用HTML转义字符,html转义符,JavaScript转义符,html转义字符表,HTML语言特殊字符对照表(ISO Latin-1字符集)...
  9. collector_使用Data Collector进行SQL Server性能监视–第3部分–阅读报告
  10. HDU 1695 GCD ★(容斥原理+欧拉函数)
  11. 扇贝有道180925每日一句
  12. 数据结构之斐波那契数列java实现
  13. 树莓派通过Pin2脚供电的注意事项
  14. 孙子兵法——精华摘录
  15. ORA-01438: value larger than specified precision allowed for this column
  16. win10查询计算机显卡,windows10系统电脑查看显卡型号的两种方法
  17. 会让你变得与众不同的22个技巧
  18. 高逼格的console.log(),要不来看下
  19. 什么是formData
  20. IO操作中flush()方法作用

热门文章

  1. centos7FastDFS分布式安装部署
  2. MacOS配置C++开发环境
  3. 迭代重建技术(ART)简要介绍
  4. 【spider】关于scrapy的安装的几个问题
  5. 计算机词汇店名,有创意的店名大全
  6. 零售行业的六大主要EDI报文
  7. scrapy自定义扩展(extensions)实现实时监控scrapy爬虫的运行状态
  8. 阿里云物联平台产品、设备及物模型添加模拟数据(实操)
  9. 开票货物名称写计算机配件可以吗,如何添加开票货物名称
  10. 真正的互联网诞生:TCP/IP协议的出现