HTML5手机拍照上传
<p>首先需要在页面添加HTML5控件 capture="camera" 这样就可以在android5.0 或则 IOS 9.0 以上直接拉起照相机，但是这些版本之下的手机只能调用相册选择 </p><p><input type=<span class="hljs-string">"file" capture=<span class="hljs-string">"camera" accept=<span class="hljs-string">"image/*" id=<span class="hljs-string">"imgcamera" name=<span class="hljs-string">"imgcamera" style=<span class="hljs-string">"display: none;"</span></span></span></span></span></span></p>
<p> οnchange=<span class="hljs-string">"ImgChange(this)"></span></p>
<p><span class="hljs-string">引入3个插件：</span></p>
<p> <script src="md5.js"></script> //图片上传校验<br><script src="exif.js"></script> //照相后自动旋转 这个很有用<br><script src="cvi_busy_lib.js"></script> //正在上传的遮盖层</p>
<p>打开摄像头代码：</p>
<p>//拍照<br>function cameraImg() {<br> document.getElementById("imgcamera").value = ""; //上传文件时先把file类型input清空下<br> $("input").click();<br> }</p>
<p> </p>
<p>拍照后图片处理代码如下，主要是先做图片旋转，有些手机拍照后显示图片是偏转的，需要自己先调整正确角度，在进行图片缩放，最后是压缩处理。</p>
<p> function ImgChange(imgdata) {<br> var _this = imgdata,<br> _file = _this.files,<br> fileType = _file.type;<br> console.log(_file.size);<br> //图片方向角 added by lzk<br> var Orientation = "";<br> if (/image\/\w+/.test(fileType)) {<br> EXIF.getData(_file, function () {<br> EXIF.getAllTags(this);<br> Orientation = EXIF.getTag(this, 'Orientation');<br> });<br> var fileReader = new FileReader();<br> fileReader.readAsDataURL(_file);<br> fileReader.onload = function (event) {<br> var result = event.target.result; //返回的dataURL<br> var image = new Image();<br> image.src = result;<br> image.onload = function () {//创建一个image对象，给canvas绘制使用<br> var cvs = document.createElement('canvas');<br> var scale = 1;<br> if (this.width > 1080 || this.height > 1080) {//1080只是示例，可以根据具体的要求去设定缩放图片大小<br> if (this.width > this.height) {<br> scale = 1080 / this.width;<br> } else {<br> scale = 1080 / this.height;<br> }<br> }<br> cvs.width = this.width * scale;<br> cvs.height = this.height * scale; //计算等比缩小后图片宽高<br> var ctx = cvs.getContext('2d');<br> ctx.drawImage(this, 0, 0, cvs.width, cvs.height);<br> var imgtmp = new Image();<br> imgtmp.src = cvs.toDataURL(fileType, 0.8);<br> imgtmp.onload = function () {<br> var cvstmp = document.createElement('canvas');<br> var isori = false;<br> if (Orientation != "" && Orientation != 1) {<br> //alert('旋转处理' + Orientation);<br> switch (Orientation) {<br> case 6://需要顺时针（向左）90度旋转<br> //alert('需要顺时针（向左）90度旋转');<br> isori = true;<br> rotateImg(this, 'left', cvstmp);<br> break;<br> case 8://需要逆时针（向右）90度旋转<br> //alert('需要顺时针（向右）90度旋转');<br> rotateImg(this, 'right', cvstmp);<br> isori = true;<br> break;<br> case 3://需要180度旋转<br> //alert('需要180度旋转');<br> rotateImg(this, 'right', cvstmp);//转两次<br> rotateImg(this, 'right', cvstmp);<br> isori = true;<br> break;<br> }<br> }<br> var newImageData;<br> if (isori)<br> newImageData = cvstmp.toDataURL(fileType, 0.8); //重新生成图片，fileType为用户选择的图片类型<br> else<br> newImageData = imgtmp.src;<br> var sendData = newImageData.replace("data:" + fileType + ";base64,", '');<br> $("#img" + imageType1).attr("src", newImageData); //显示图片<br> var md5str = hex_md5(sendData); //MD5校验<br> uploadImages(sendData, md5str);<br> }<br> }<br> }<br> } else {<br> alert("图片类型不正确");<br> }<br> }</p>
<p>选择图片的代码如下</p>
<p>function rotateImg(img, direction, canvas) {<br> //alert(img);<br> //最小与最大旋转方向，图片旋转4次后回到原方向<br> var min_step = 0;<br> var max_step = 3;<br> //var img = document.getElementById(pid);<br> if (img == undefined) return;<br> //img的高度和宽度不能在img元素隐藏后获取，否则会出错<br> var height = img.height;<br> var width = img.width;<br> var step = 2;<br> <br> if (direction == 'right') {<br> step++;<br> //旋转到原位置，即超过最大值<br> step > max_step && (step = min_step);<br> } else {<br> step--;<br> step < min_step && (step = max_step);<br> }<br> var ctx = canvas.getContext('2d');<br> //旋转角度以弧度值为参数<br> var degree = step * 90 * Math.PI / 180;<br> switch (step) {<br> case 0:<br> canvas.width = width;<br> canvas.height = height;<br> ctx.drawImage(img, 0, 0);<br> break;<br> case 1:<br> canvas.width = height;<br> canvas.height = width;<br> ctx.rotate(degree);<br> ctx.drawImage(img, 0, -height);<br> break;<br> case 2:<br> canvas.width = width;<br> canvas.height = height;<br> ctx.rotate(degree);<br> ctx.drawImage(img, -width, -height);<br> break;<br> case 3:<br> canvas.width = height;<br> canvas.height = width;<br> ctx.rotate(degree);<br> ctx.drawImage(img, -width, 0);<br> break;<br> }<br> return ctx;<br> }</p>
<p><br>//将图片上传的服务器本地<br> function uploadImages(localData, md5str) {<br> var xval = getBusyOverlay('viewport', {<br> color: 'white',<br> opacity: 0.75,<br> text: 'viewport: loading...',<br> style: 'text-shadow: 0 0 3px black;font-weight:bold;font-size:16px;color:white'<br> }, {color: '#ff0', size: 100, type: 'o'});<br> $.ajax({<br> type: "POST",<br> url: "",<br> beforeSend: function () {<br> if (xval) {<br> xval.settext("正在上传图片，请稍后......");//此处可以修改默认文字，此处不写的话，就按照默认文字来。<br> }<br> },<br> data: {<br> localData: localData,<br> md5str: md5str<br> },<br> dataType: "json",<br> timeout: 120000, //超时时间：120秒<br> success: function (data) {<br> xval.remove(); //此处是移除遮罩层<br> if (data.result == 1) {<br> alert("上传成功！");<br> } else {<br> alert("上传失败！");<br> }<br> }, error: function (XMLHttpRequest, textStatus, errorThrown) {<br> xval.remove(); //此处是移除遮罩层<br> alert("上传失败！");<br> }<br> });<br> }<br>后台代码就不贴出来了可以使用各种语音接收，由于初次接触html5 所以代码写的比较乱。如有不对希望大家指正。</p>
<p> </p>
<p>原文链接：https://blog.csdn.net/jeffkxt/article/details/80472596</p><br><br>
来源：https://www.cnblogs.com/cuiyunxian/p/11810721.html
頁:
[1]