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">
<!--<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调用相机,裁剪,压缩照片相关推荐
- 关于调用系统相机以及压缩照片
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流量公司)说的 ...
最新文章
- 【Ubuntu】使用过的ubuntu工具记录
- MIT将AI引入中学课堂,除了设计AI系统,还要学生思考背后的伦理
- 我脑中飘来飘去的css魔幻属性
- python编程语言是什么-python是什么编程语言
- 数据分析---ipython使用
- asp.net缓存(二)
- itext设置pdf的尺寸_如何获取pdf文档iText 7的页面大小-问答-阿里云开发者社区-阿里云...
- python 示例_带有示例的Python File write()方法
- 【转】老邹说Magento的前世今生
- 吴孟超:用一生为理想去奋斗 丨纪念吴孟超医生
- mysql dump 数据时间_使用mysqldump备份数据及做时间点还原测试步骤
- python 异常回溯_关于python:在循环中捕获异常回溯,然后在脚本末尾引发错误...
- mvc 项目 webconfig 打开错误_Spring体系常用项目一览
- 【干货】深度学习及在推荐中的实践-美团点评.pdf(附下载链接)
- matlab弗洛伊德算法,MATLAB弗洛伊德算法结果有疑惑,求大神解答
- 程序员加班制作了30张可视化大屏模板,套用数据直接用
- 春运买不到票?程序员喊你来GitHub看牛哄哄的抢票神器
- Springboot专利申请服务平台 毕业设计-附源码260839
- DOS简介及基本操作
- 基于抛物线过渡(梯形加减速)的空间直线插补算法与空间圆弧插补算法(Matlab)