vue-cropper 一个优雅的图片裁剪插件

npm api的地址:https://www.npmjs.com/package/vue-cropper

1. 知识点一:手机实现图片上传

input type=“file“属性详解,利用capture调用手机摄像头

<input @click="inputClick($event)" :ref="`changeInput${index}`" type="file" capture="camera" accept="image/*" @change="changeVideo" style="display:none" />
capture(调用设备媒体):
capture 属性:在webapp上使用 input 的 file 属性,指定 capture 属性可以调用系统默认相机、摄像和录音功能。

capture表示,可以捕获到系统默认设备的媒体信息,如下:

capture="camera" 相机
capture="camcorder" 摄像机
capture="microphone" 录音

实例:
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

 

 

  

posted @ 2021-12-30 18:12  front-gl  阅读(303)  评论(0编辑  收藏  举报