H5调用相机，裁剪，压缩照片

Love The Way You Lie 2022-05-16 06:06 183阅读 0赞

最近项目中遇到拍照，预览上传的问题，苹果手机不兼容，拍照旋转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">  
          
        <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>

--------------------

![20191229112121499.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220516/c46814bfc9e1465d8530bcf5b72e6eac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220516/d6e7f4f37a654a2a9186cfdb1d658a72.png