HTML 5携帯カメラ、アルバム機能を呼び出す

プロジェクトでantd-mobileのコンポーネントImagePickerピクチャセレクタを使用してピクチャアップロードを行うのは、やはり便利です.
あるビジネスシーンでアップロードする必要がある写真は写真のみで、アルバムから既存の写真を選択できないため、ImagePickerはこの機能をサポートしていないため、ImagePickerコンポーネントを少し改造する必要があります.
一、既存の知識と資料の検索に基づいて、が直接カメラを開くことをサポートしていることを確認し、キーワードはcaptureである.

w 3 cの紹介:HTML Media Capture

demo1:HTML Media Capture Examples

demo2:HTML Media Capture Syntax Examples

二、分析ノード要素とソースコード
ImagePickerコンポーネントはinputを利用しているが,captureが欠けていることが分かった.ImagePickerのソースコード(私が使用しているantd-mobileバージョンは2.1.10)を特定し、主にアップロードをクリックするときの操作に注目します.+のグラフはinputノードを表し、次の ...をクリックするとinputノードが動的に生成されていることがわかり、ソースコードと組み合わせて確認できます.
ImagePickerは現在(2019-02-21 09:49:47)capture属性をサポートしていないため、改造案はinputを改造することである.次はReactプロジェクトのソリューションです.つまり、captureを手動で追加します.

  componentDidMount () {
    const inputs = document.getElementsByTagName('input');
    for (let index = 0; index < inputs.length; index++) {
      const element = inputs[index];
      element.setAttribute("capture", true); 
    }
  }