h5 实现调用本地相机上传图片与相册上传图片

可以使用HTML5中的input标签的type属性来实现调用本地相机和相册上传图片。

1. 调用本地相机上传图片：

<input type="file" accept="image/*" capture="camera">

上述代码中，accept属性指定只能选择图片文件，capture属性指定调用相机进行拍照。

2. 调用相册上传图片：

<input type="file" accept="image/*">

上述代码中，accept属性指定只能选择图片文件，不指定capture属性则默认调用相册进行选择。

在Web应用程序中，可以使用JavaScript代码来获取用户选择的图片文件。

let inputElement = document.querySelector('input[type=file]');
inputElement.addEventListener('change', (e) => {
  // 获取用户选择的图片文件
  let file = e.target.files[0];
  // 处理图片文件
  // ...
});

在处理图片文件时，可以将图片预览或者上传到服务器。

相关问题

uniapp H5调用本地相册图片后上传

在uniApp中，如果你想要H5页面通过调用用户的本地相册选择图片并上传到服务器，可以按照以下步骤操作：

1. 首先，引入必要的权限管理，确保应用有访问用户照片的权限。在`app.json`文件中添加对`scope.writePhotosAlbum`权限的申请：

{
  "permission": {
    "scope.writePhotosAlbum": {
      "desc": "用于获取您的照片"
    }
  }
}

2. 使用uni-app提供的API `getUserMedia`请求相机和相册权限：

uni.requestPermission({
  permission: 'scope.writePhotosAlbum',
  success(res) {
    if (res.granted) {
      // 用户同意了权限，可以选择图片
      getUserMedia({
        type: 'image',
        success(result) {
          let file = result.tempFilePath; // 获取选中的图片路径
          // 进行上传处理
          uploadImage(file);
        },
        fail(err) {
          console.error('获取图片失败', err);
        }
      });
    } else {
      console.log('用户拒绝了权限');
    }
  },
  fail() {
    console.log('请求权限失败');
  }
});

3. 定义`uploadImage`函数，这里假设你已经有了一个HTTP上传接口：

async function uploadImage(imgPath) {
  const formData = new FormData();
  formData.append('file', uni.uploader.filepond.convertFile(imgPath));

  try {
    await axios.post('/api/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}});
    uni.showToast({message: '图片上传成功'});
  } catch (error) {
    uni.showToast({message: '图片上传失败', errorDescription: error.message});
  }
}

4. 考虑使用uni-app的`uni.uploader`组件配合`filepond`插件来进行更复杂的图片预览、裁剪等操作。

记得在实际项目中检查网络连接以及错误处理，以便提供良好的用户体验。

安卓webview(h5)调用原生相机及相册返回给h5

安卓的WebView可以通过与原生相机和相册进行交互，从而实现调用相机和相册后将结果返回给H5。

首先，我们需要在AndroidManifest.xml文件中添加相机和相册的权限：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

接下来，在我们的WebView的相关代码中，我们需要实现一个WebChromeClient来处理WebView中的文件选择器。在onShowFileChooser方法中，我们可以获取到调用相机和相册所返回的文件路径，然后将其返回给H5页面：

webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient() {
    // Android 5.0+
    public boolean onShowFileChooser(WebView view, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        if (mUploadCallbackAboveL != null) {
            mUploadCallbackAboveL.onReceiveValue(null);
        }
        mUploadCallbackAboveL = filePathCallback;

        Intent intent = fileChooserParams.createIntent();
        try {
            startActivityForResult(intent, FILE_CHOOSER_RESULT_CODE);
        } catch (ActivityNotFoundException e) {
            mUploadCallbackAboveL = null;
            return false;
        }

        return true;
    }

    // Android 4.1+
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
        if (mUploadMessage != null) return;
        mUploadMessage = uploadMsg;

        Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
        if (capture != null && capture.equals("camera")) {
            intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
            // 设置相机拍照后保存图片的路径
            File imageStorageDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "AppName");
            if (!imageStorageDir.exists()) {
                imageStorageDir.mkdirs();
            }
            File file = new File(imageStorageDir + File.separator + "IMG_" + String.valueOf(System.currentTimeMillis()) + ".jpg");
            mCameraPhotoPath = "file:" + file.getAbsolutePath();
            intent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(file));
        }
        intent.addCategory(Intent.CATEGORY_OPENABLE);
        intent.setType("image/*");

        try {
            startActivityForResult(Intent.createChooser(intent, "选择文件"), FILE_CHOOSER_RESULT_CODE);
        } catch (ActivityNotFoundException e) {
            mUploadMessage = null;
            return;
        }
    }
});

在我们的Activity中，我们需要重写onActivityResult方法，将照片的路径返回给H5页面：

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == FILE_CHOOSER_RESULT_CODE) {
        if (resultCode == RESULT_OK) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                if (mUploadCallbackAboveL != null) {
                    Uri[] results = null;
                    if (data != null) {
                        String dataString = data.getDataString();
                        ClipData clipData = data.getClipData();
                        if (clipData != null) {
                            results = new Uri[clipData.getItemCount()];
                            for (int i = 0; i < clipData.getItemCount(); i++) {
                                ClipData.Item item = clipData.getItemAt(i);
                                results[i] = item.getUri();
                            }
                        }
                        if (dataString != null)
                            results = new Uri[]{Uri.parse(dataString)};
                    }
                    mUploadCallbackAboveL.onReceiveValue(results);
                    mUploadCallbackAboveL = null;
                }
            } else {
                if (mUploadMessage != null) {
                    Uri result = data == null ? Uri.parse(mCameraPhotoPath) : data.getData();
                    mUploadMessage.onReceiveValue(result);
                    mUploadMessage = null;
                }
            }
        } else {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                if (mUploadCallbackAboveL != null) {
                    mUploadCallbackAboveL.onReceiveValue(null);
                    mUploadCallbackAboveL = null;
                }
            } else {
                if (mUploadMessage != null) {
                    mUploadMessage.onReceiveValue(null);
                    mUploadMessage = null;
                }
            }
        }
    }
}

通过上述代码，当WebView调用相机和相册后，会将结果通过回调的方式返回给H5页面，以便在H5页面上进行处理和展示。