手机拍照 录像 上传
2018-01-15 17:07
295 查看
坚持发文章也是件难事,今天快下班了,抽出点时间,再发点东西。利人利己。 主要发前端代码,后端比较好写。 js代码:
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener("plusready", onPlusReady, false);
// 扩展API加载完毕,现在可以正常调用扩展API
function onPlusReady() {
console.log("plusready");
}
var cmr = null;
var dataURL = null;
var resourcess = null;
function upup(filepath) {
var task = plus.uploader.createUpload(
url, {},
function(t, status) {
// 上传完成
if (status == 200) {
resourcess += ","+t.ress;
alert(JSON.stringify(t.ress));
alert("视频上传成功!");
} else {
alert("视频上传失败!");
}
});
task.addFile(filepath, {
key : 'fileUpload'
});
task.start();
}
function fileChange2(that) {
var file_path = that.files[0];
upup(file_path);
}
// 录像
function videoCapture() {
cmr = new plus.camera.getCamera();
var res = cmr.supportedVideoResolutions[0];
var fmt = cmr.supportedVideoFormats[0];
var filepath = "";
console.log("Resolution: " + res + ", Format: " + fmt);
cmr.startVideoCapture(function(path) {
new plus.io.resolveLocalFileSystemURL(path,
function(entry) {
filepath = entry.toLocalURL();
upup(filepath);
}, function(e) {
outLine("读取视频文件错误:" + e.message);
});
}, function(error) {
alert("录像失败信息: " + error.message);
}, {
resolution : res,
format : fmt
});
// 拍摄10s后自动关闭
setTimeout(stopCapture, 10000);
}
// 停止录像
function stopCapture() {
console.log("stopCapture");
cmr.stopVideoCapture();
}
var imgid = "";
//上传弹窗
function captureImagell(file_path, filepath) {
$("#picture").hide();
if (filepath == "") {
return;
}
var
4000
extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length)
.toUpperCase();
if (".jpg|.png|.bmp|.jpeg".toUpperCase().indexOf(
ext.toUpperCase()) == -1) {
alert("只允许上传jpg、png、bmp、jpeg格式的图片");
return false;
}
//以图片宽度为800进行压缩
lrz(file_path, {
width : 800
}).then(function(rst) {
//imgHead.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + filepath + "\")";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
//imgHead.src = rst;
//压缩后异步上传
$.ajax({
url : url ,
type : "POST",
data : {
imgdata : rst.base64
//压缩后的base值
},
dataType : "json",
cache : false,
async : false,
success : function(data) {
if (data.success) {
alert(JSON.stringify(data));///data.message为上传成功后的文件路径
imgid = data.data.id;
resourcess +=","+record;
alert(imgid);
$("#imghead").attr('src', rst.base64);
} else {
alert(data.success);///data.message为上传失败原因
}
},
error : function() {
alert("上传失败");
}
});
});
}
function fileChange(that) {
var filepath = $(that).val();
var file_path = that.files[0];
captureImagell(file_path, filepath);
}
// 拍照
function captureImage() {
var cmr = new plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0];
var fmt = cmr.supportedImageFormats[0];
var file_path = "";
console.log("Resolution: " + res + ", Format: " + fmt);
var filepath = null;
cmr.captureImage(function(path) {
filepath = path.split("/")[1];
plus.io.resolveLocalFileSystemURL(path, function(entry) {
file_path = entry.toLocalURL();
captureImagell(file_path, filepath);
}, function(e) {
outLine("读取拍照文件错误:" + e.message);
});
}, function(error) {
alert("Capture image failed: " + error.message);
}, {
resolution : res,
format : fmt
});
}
html 主要代码:
<div>
对设备拍照上传照片: <img id="imghead" src="img/wo.png"
style="width: 100px; height: 100px;" />
<a href="#picture"
class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"
style="padding: 5px 20px;">上传</a>
</div>
<div>
现在录象: <a href="#picture2"
class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"
style="padding: 5px 20px;">开始录制</a>
</div>
。。。
<div id="picture"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a onclick="captureImage()">拍照</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" onclick="selectFile()">相册</a> <input
class="hidden" type="file" accept="image/*" capture="camera"
onchange="fileChange(this)" id="payfile" name="myfile"
data-role="none"></input>
</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
<div id="picture2"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a onclick="videoCapture()">录制</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" onclick="selectFile2()">从媒体库中选择</a>
<input class="hidden" type="file" accept="video/*"
capture="camcorder" onchange="fileChange2(this)" id="payfile2"
name="myfile2" data-role="none"></input>
</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
。。。
<div class="footer">
<div id="picture"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a onclick="captureImage()">拍照</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" onclick="selectFile()">相册</a> <input
class="hidden" type="file" accept="image/*" capture="camera"
onchange="fileChange(this)" id="payfile" name="myfile"
data-role="none"></input>
</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
<div id="picture2"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a onclick="videoCapture()">录制</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" onclick="selectFile2()">从媒体库中选择</a>
<input class="hidden" type="file" accept="video/*"
capture="camcorder" onchange="fileChange2(this)" id="payfile2"
name="myfile2" data-role="none"></input>
</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
</div>
快下班了,就弄到这里吧!!!
// 扩展API加载完毕后调用onPlusReady回调函数
document.addEventListener("plusready", onPlusReady, false);
// 扩展API加载完毕,现在可以正常调用扩展API
function onPlusReady() {
console.log("plusready");
}
var cmr = null;
var dataURL = null;
var resourcess = null;
function upup(filepath) {
var task = plus.uploader.createUpload(
url, {},
function(t, status) {
// 上传完成
if (status == 200) {
resourcess += ","+t.ress;
alert(JSON.stringify(t.ress));
alert("视频上传成功!");
} else {
alert("视频上传失败!");
}
});
task.addFile(filepath, {
key : 'fileUpload'
});
task.start();
}
function fileChange2(that) {
var file_path = that.files[0];
upup(file_path);
}
// 录像
function videoCapture() {
cmr = new plus.camera.getCamera();
var res = cmr.supportedVideoResolutions[0];
var fmt = cmr.supportedVideoFormats[0];
var filepath = "";
console.log("Resolution: " + res + ", Format: " + fmt);
cmr.startVideoCapture(function(path) {
new plus.io.resolveLocalFileSystemURL(path,
function(entry) {
filepath = entry.toLocalURL();
upup(filepath);
}, function(e) {
outLine("读取视频文件错误:" + e.message);
});
}, function(error) {
alert("录像失败信息: " + error.message);
}, {
resolution : res,
format : fmt
});
// 拍摄10s后自动关闭
setTimeout(stopCapture, 10000);
}
// 停止录像
function stopCapture() {
console.log("stopCapture");
cmr.stopVideoCapture();
}
var imgid = "";
//上传弹窗
function captureImagell(file_path, filepath) {
$("#picture").hide();
if (filepath == "") {
return;
}
var
4000
extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length)
.toUpperCase();
if (".jpg|.png|.bmp|.jpeg".toUpperCase().indexOf(
ext.toUpperCase()) == -1) {
alert("只允许上传jpg、png、bmp、jpeg格式的图片");
return false;
}
//以图片宽度为800进行压缩
lrz(file_path, {
width : 800
}).then(function(rst) {
//imgHead.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + filepath + "\")";
// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
//imgHead.src = rst;
//压缩后异步上传
$.ajax({
url : url ,
type : "POST",
data : {
imgdata : rst.base64
//压缩后的base值
},
dataType : "json",
cache : false,
async : false,
success : function(data) {
if (data.success) {
alert(JSON.stringify(data));///data.message为上传成功后的文件路径
imgid = data.data.id;
resourcess +=","+record;
alert(imgid);
$("#imghead").attr('src', rst.base64);
} else {
alert(data.success);///data.message为上传失败原因
}
},
error : function() {
alert("上传失败");
}
});
});
}
function fileChange(that) {
var filepath = $(that).val();
var file_path = that.files[0];
captureImagell(file_path, filepath);
}
// 拍照
function captureImage() {
var cmr = new plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0];
var fmt = cmr.supportedImageFormats[0];
var file_path = "";
console.log("Resolution: " + res + ", Format: " + fmt);
var filepath = null;
cmr.captureImage(function(path) {
filepath = path.split("/")[1];
plus.io.resolveLocalFileSystemURL(path, function(entry) {
file_path = entry.toLocalURL();
captureImagell(file_path, filepath);
}, function(e) {
outLine("读取拍照文件错误:" + e.message);
});
}, function(error) {
alert("Capture image failed: " + error.message);
}, {
resolution : res,
format : fmt
});
}
html 主要代码:
<div>
对设备拍照上传照片: <img id="imghead" src="img/wo.png"
style="width: 100px; height: 100px;" />
<a href="#picture"
class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"
style="padding: 5px 20px;">上传</a>
</div>
<div>
现在录象: <a href="#picture2"
class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined"
style="padding: 5px 20px;">开始录制</a>
</div>
。。。
<div id="picture"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a onclick="captureImage()">拍照</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" onclick="selectFile()">相册</a> <input
class="hidden" type="file" accept="image/*" capture="camera"
onchange="fileChange(this)" id="payfile" name="myfile"
data-role="none"></input>
</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
<div id="picture2"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a onclick="videoCapture()">录制</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" onclick="selectFile2()">从媒体库中选择</a>
<input class="hidden" type="file" accept="video/*"
capture="camcorder" onchange="fileChange2(this)" id="payfile2"
name="myfile2" data-role="none"></input>
</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
。。。
<div class="footer">
<div id="picture"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a onclick="captureImage()">拍照</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" onclick="selectFile()">相册</a> <input
class="hidden" type="file" accept="image/*" capture="camera"
onchange="fileChange(this)" id="payfile" name="myfile"
data-role="none"></input>
</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
<div id="picture2"
class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a onclick="videoCapture()">录制</a></li>
<li class="mui-table-view-cell"><a class="a-file"
href="javascript:void(0)" type="file" data-role="none" onclick="selectFile2()">从媒体库中选择</a>
<input class="hidden" type="file" accept="video/*"
capture="camcorder" onchange="fileChange2(this)" id="payfile2"
name="myfile2" data-role="none"></input>
</ul>
<form id="uploadfiles" enctype="multipart/form-data">
<input type="hidden" name="userId" value="0"></input>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#picture"><b>取消</b></a>
</li>
</ul>
</div>
</div>
快下班了,就弄到这里吧!!!
相关文章推荐
- html5视频前端视频上传,手机拍照上传,手机录像上传
- H5调用手机的摄像头拍照上传以及手机相册选取照片但不支持Android的分析
- Android手机拍照上传客户端代码
- mui调取手机摄像头,拍照,上传
- 有些Android手机拍照上传被旋转90度的处理方法
- Android:Camera的使用,并处理手机拍照后上传图片被旋转的问题
- 【安卓知识点汇总】 手机拍照上传照片
- 关于部分android手机连拍模式,手机拍照上传的图片旋转了90度的c#解决方案
- android 手机拍照上传项目的开发-----Camera1.0(动态显示预览)
- Android部分手机拍照上传返回为空处理,和拍照后图片压缩后保存到指定路径下
- mui调取手机摄像头拍照,上传到服务器
- android手机拍照后上传图片被旋转的问题
- 关于部分手机拍照上传的图片旋转显示的c#解决方案
- Android实现从手机相册上传头像以及拍照上传到服务器
- Unity如何调用安卓手机摄像头实现拍照和录像
- HTML5+Canvas调用手机拍照功能实现图片上传(下)
- HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(一)
- 手机的web页面调用相机拍照上传
- 如何调用手机自带的照相机APK进行拍照、录像并自动保存照片和录像
- html5调用手机摄像头,实现拍照上传功能