fastadmin拍照生成图片，然后上传服务器-猫叔的编程圈

今天一个粉丝需要这样的功能，点击拍照按钮，调用摄像头，然后拍照，把照片自动传到服务器内，再填写到表单里。这个功能稍微复杂了些，我们看下怎么实现。

视频地址：

https://www.bilibili.com/video/BV1yb421n7AM/

1.在上传按钮的旁边，增加一个拍照按钮

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Testimage')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-testimage" class="form-control" size="40" name="row[testimage]" type="text">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="fa-snapButton" class="btn btn-success" > 拍照 </button></span>

                    <span><button type="button" id="faupload-testimage" class="btn btn-danger faupload" data-input-id="c-testimage" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-testimage"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>

                    <span><button type="button" id="fachoose-testimage" class="btn btn-primary fachoose" data-input-id="c-testimage" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-testimage"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-testimage"></ul>
        </div>
    </div>

2.增加一个视频，一个canvas，和一张图片

文章版权归作者所有，未经允许请勿转载。

THE END

fastadmin
# 上传