使用h5拍照压缩上传图片

在H5中使用video调用手机相机，然后使用canvas捕捉视频内容得到图片。拍照和压缩上传

<video id="video" width="320" height="240" autoplay></video>
<button id="snap">拍摄</button>
<canvas id="canvas" width="320" height="240"></canvas>

<script>

window.addEventListener("DOMContentLoaded", function () { ???var canvas = document.getElementById("canvas"),//调用canvas接口 ???????????context = canvas.getContext("2d"), ???????????video = document.getElementById("video"), ???????????videoObj = { "video": true }, ???????????errBack = function (error) {//错误处理 ???????????????console.log("Video capture error: ", error.code); ???????????}; ???if (navigator.getUserMedia) {//调用html5拍摄接口 ???????navigator.getUserMedia(videoObj, function (stream) { ???????????video.src = stream;//摄像机属于视频流，所以当然要输出到html5的video标签中了 ???????????video.play();//开始播放 ???????}, errBack); ???} else if (navigator.webkitGetUserMedia) { //WebKit内核调用html5拍摄接口 ???????navigator.webkitGetUserMedia(videoObj, function (stream) { ???????????video.src = window.webkitURL.createObjectURL(stream);//同上 ???????????video.play();//同上 ???????}, errBack); ???} ???else if (navigator.mozGetUserMedia) { //moz内核调用html5拍摄接口 ???????navigator.mozGetUserMedia(videoObj, function (stream) { ???????????video.src = window.URL.createObjectURL(stream);//同上 ???????????video.play();//同上 ???????}, errBack); ???}}, false);document.getElementById("snap").addEventListener("click", function () { ???//获取拍照按钮绑定事件 ???var canvans = document.getElementById("canvas");//调用canvas接口 ???var context = canvas.getContext("2d"); ???context.drawImage(video, 0, 0, 640, 480);//调用canvas接口的drawImage方法绘制当前video标签中的静态图片，其实就是截图 ???//这里就可以写上传服务器代码了 ???var dataURL = canvas.toDataURL("image/jpeg");//获取图片的base64格式的数据 ???dataURL = dataURL.replace("data:image/png;base64,", ""); ???var blobBin = dataURL; ???var array = []; ???for (var i = 0; i < blobBin.length; i++) { ???????array.push(blobBin.charCodeAt(i)); ???} ???var file = new Blob([new Uint8Array(array)], { type: ‘image/png‘ }); ???var formdata = new FormData(); ???formdata.append("myNewFileName", file); ???$.ajax({ ???????url: "uploadFile.php", ???????type: "POST", ???????data: formdata, ???????processData: false, ???????contentType: false, ???}).done(function (respond) { ???????alert(respond); ???});});function UploadCompressedImage(img) { ???var canvas = document.createElement("canvas"); ???canvas.width = img.width; ???canvas.height = img.height; ???var ctx = canvas.getContext("2d"); ???ctx.drawImage(img, 0, 0, img.width, img.height); ???var dataURL = canvas.toDataURL("image/jpeg"); ???dataURL = dataURL.replace("data:image/png;base64,", ""); ???var blobBin = dataURL; ???var array = []; ???for (var i = 0; i < blobBin.length; i++) { ???????array.push(blobBin.charCodeAt(i)); ???} ???var file = new Blob([new Uint8Array(array)], { type: ‘image/png‘ }); ???var formdata = new FormData(); ???formdata.append("myNewFileName", file); ???$.ajax({ ???????url: "uploadFile.php", ???????type: "POST", ???????data: formdata, ???????processData: false, ???????contentType: false, ???}).done(function (respond) { ???????alert(respond); ???});}

</script>

使用h5拍照压缩上传图片

原文地址：http://www.cnblogs.com/zhumingwu/p/7698582.html