HTML5调用手机摄像头拍照并本地压缩照片上传,支持微信公众号网页,H5app页面等。
html页面
1 |
<div class="aui-list-item-input"><a class="file">拍照上传 <input id="wsd" class="cimg" accept="image/*" type="file" /> </a></div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.pic{ display: none; width: 50%; } .file { position: relative; display: inline-block; background: #D0EEFF; border: 1px solid #99D3F5; border-radius: 4px; padding: 4px 12px; overflow: hidden; color: #1E88C7; text-decoration: none; text-indent: 0; line-height: 20px; } .file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0; } .file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none; } |
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<script type="text/javascript"> $(document).ready(function () { $('.cimg').change(function () { var file = $(this)[0].files[0]; var that = $(this); imgResize(file, callback, that); }); }); function imgResize(file, callback, that) { var fileReader = new FileReader(); fileReader.onload = function () { var IMG = new Image(); IMG.src = this.result; IMG.onload = function () { var w = this.naturalWidth, h = this.naturalHeight, resizeW = 0, resizeH = 0; // maxSize 是压缩的设置,设置图片的最大宽度和最大高度,等比缩放,level是图片的质量,数值越小质量越低 var maxSize = { width: 500, height: 500, level: 0.8 }; if (w > maxSize.width || h > maxSize.height) { var multiple = Math.max(w / maxSize.width, h / maxSize.height); resizeW = w / multiple; resizeH = h / multiple; } else { // 如果图片尺寸小于最大限制,则不压缩直接上传 return callback(IMG.src, that) } var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); if (window.navigator.userAgent.indexOf('iPhone') > 0) { canvas.width = resizeH; canvas.height = resizeW; ctx.roate(90 * Math.PI / 180); ctx.drawImage(IMG, 0, -resizeH, resizeW, resizeH); } else { canvas.width = resizeW; canvas.height = resizeH; ctx.drawImage(IMG, 0, 0, resizeW, resizeH); } var base64 = canvas.toDataURL('image/jpeg', maxSize.level); return callback(base64, that) // bast64 转换 文件 // convertBlob(window.atob(base64.split(',')[1]), callback); } }; fileReader.readAsDataURL(file); } function convertBlob(base64, callback) { var buffer = new ArrayBuffer(base64.length); var ubuffer = new Uint8Array(buffer); for (var i = 0; i < base64.length; i++) { ubuffer[i] = base64.charCodeAt(i) } var blob; try { blob = new Blob([buffer], {type: 'image/jpg'}); } catch (e) { window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder; if (e.name === 'TypeError' && window.BlobBuilder) { var blobBuilder = new BlobBuilder(); blobBuilder.append(buffer); blob = blobBuilder.getBlob('image/jpg'); } } callback(blob) } // 获取图片 base64 格式 function callback(fileResize, that) { if (fileResize != '') { // 图片上传 $.ajax({ url: "后台地址", type: "POST", data: {'pic': fileResize}, dataType: "json", success: function (info) { // 图片赋值 $("#" + pic_id).val(info.url); }}); } } </script> |
php后台
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
if ($this->request->isAjax()) { $param = input('post.'); $pic = isset($param['pic']) ? $param['pic'] : ''; if($pic != ''){ $pic_url = up_base64img($pic); return ['code' => 1, 'url' => $pic_url, 'msg' => '上传成功']; } } function up_base64img($img_data) { $img_data = trim($img_data); if (!empty($img_data)) { $reg = '/data:image\/(\w+?);base64,(.+)$/si'; preg_match($reg, $img_data, $match_result); $file_name = date("his") . '_' . rand(10000, 99999) . '.' . $match_result[1]; //定义图片储存文件目录 $dir = DIR_IMAGE . 'images/house/' . date('ym'); $path = 'house/' . date('ym') . '/' . $file_name; if (!is_dir($dir)) { //如果不存在就创建该目录 mkdir($dir, 0777, true); } $pic_path = $dir . '/' . $file_name; $num = file_put_contents($pic_path, base64_decode($match_result[2])); if (!empty($num)) { //上传成功之后,再进行缩放操作 //$image = \think\Image::open($logo_path); // 按照原图的比例生成一个最大为150*150的缩略图并保存为thumb.png //$image->thumb(102, 36)->save($logo_path); return $path; } else { return ''; } } else { return ''; } } |