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

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

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);
               }
           });

$('#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调用相机，裁剪，压缩照片相关推荐

关于调用系统相机以及压缩照片
style="DISPLAY: none" frameborder="0"> style="Z-INDEX: 9999; POSITION: a ...
H5调用本地摄像头拍摄照片
前言最近项目中需要H5调用本地摄像头拍照的需求. 代码 <canvas id="canvasCemara" width="500" height=&qu ...
Android调用相机拍照，照片被旋转的问题
问题描述:最近在做毕设,想在我的天气APP中加入一个添加图片水印的小功能,首先就是学习了郭霖老师的调用相机并显示的功能.起先是在华为的手机上调试(是一个我刚换下来的手机mate7)图片没有问题,可以正 ...
安卓图片操作（调用系统相机，预览本地照片，调用系统裁剪图片，压缩图片，中心裁剪方形图片，bitmap转byte[]）
先创建照片存储uri public static Uri createImagePathUri(Context context) {Uri imageFilePath = null;String st ...
h5 调用ios原生相机拍照上传照片
1.html中的点击按钮和回调显示标签---------------直接上代码 <!DOCTYPE html> <html lang="en"> <h ...
H5调用本地相册/相机上传图片
在开发中有时候会用到H5调用本地图片或者相机,像第三方的实名认证,在线客服等等都需要上传图片.H5中只需要通过<input>调用即可,ios是可以的实现的,不需要自己处理,除非客户端压缩图 ...
H5调用手机摄像头拍照，如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
cocos creator 调用相机相册裁剪图片并上传到服务器
大致思路就是creator里面js调用Java和object-c代码,调起系统相机相册,选取图库图片/拍照图片进行裁剪,然后转化为base64字符串,最后通过http post请求上传到服务器. Ja ...
深坑之Webview,解决H5调用android相机拍照和录像
最近在开发过程中遇到一个问题,主要是调用第三方的实名认证,需要拍照和录像; 办过支付宝大宝卡和腾讯的大王卡的都知道这玩意,办卡的时候就需要进行实名认证,人脸识别; 本来第三方平台(xxx流量公司)说的 ...

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

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

最新文章

热门文章