just do it

HTML5调用手机摄像头拍照并本地压缩照片上传，支持微信公众号网页，H5app页面等。

2019 年 12 月 27 日 0条评论 9,500次阅读 0人点赞

HTML5调用手机摄像头拍照并本地压缩照片上传，支持微信公众号网页，H5app页面等。
《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-&gt;request-&gt;isAjax()) {
        $param = input('post.');
        $pic = isset($param['pic']) ? $param['pic'] : '';
        if($pic != ''){
           $pic_url = up_base64img($pic);
           return ['code' =&gt; 1, 'url' =&gt; $pic_url, 'msg' =&gt; '上传成功'];
        }    
}
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-&gt;thumb(102, 36)-&gt;save($logo_path);
            return $path;
        } else {
            return '';
        }
    } else {
        return '';
    }
}
点赞
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可