如何通过Android WebView将选中的图片传输至jQuery脚本？

需求说明 #

在Android项目中使用Photo Picker选择图片，将选中的图片传递至WebView内的jQuery脚本进行预裁剪。

现有代码 #

Photo Picker注册代码 #

ActivityResultLauncher<PickVisualMediaRequest> pickMedia = registerForActivityResult(new ActivityResultContracts.PickVisualMedia(), photo -> {
    if (photo == null) {
        Toast.makeText(MainActivity.this, "No image Selected", Toast.LENGTH_SHORT).show();
    } else {
        Toast.makeText(MainActivity.this, "Image: "+ photo , Toast.LENGTH_SHORT).show();
    }
});

WebView交互代码 #

webView.addJavascriptInterface(new Object() {
        @JavascriptInterface
        public void performClick() {
            pickMedia.launch(new PickVisualMediaRequest.Builder()
                    .setMediaType(ActivityResultContracts.PickVisualMedia.ImageOnly.INSTANCE)
                    .build());
        }
    }, "ok");

实现图片传递到WebView的步骤 #

1. 将选中图片的Uri转换为Base64 #

WebView的JS脚本更易处理Base64格式的图片数据，添加工具方法完成转换：

private String uriToBase64(Uri uri) {
    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    try (InputStream inputStream = getContentResolver().openInputStream(uri)) {
        byte[] buffer = new byte[1024];
        int read;
        while ((read = inputStream.read(buffer)) != -1) {
            baos.write(buffer, 0, read);
        }
        return Base64.encodeToString(baos.toByteArray(), Base64.DEFAULT);
    } catch (IOException e) {
        e.printStackTrace();
        return null;
    }
}

2. 修改Photo Picker回调，传递Base64到WebView #

更新回调逻辑，将转换后的图片数据通过evaluateJavascript传递给JS：

ActivityResultLauncher<PickVisualMediaRequest> pickMedia = registerForActivityResult(new ActivityResultContracts.PickVisualMedia(), photo -> {
    if (photo == null) {
        Toast.makeText(MainActivity.this, "未选中图片", Toast.LENGTH_SHORT).show();
    } else {
        String base64Image = uriToBase64(photo);
        if (base64Image != null) {
            // 调用WebView中的JS处理函数
            webView.evaluateJavascript("javascript:handleSelectedImage('data:image/jpeg;base64," + base64Image + "')", null);
        } else {
            Toast.makeText(MainActivity.this, "图片转换失败", Toast.LENGTH_SHORT).show();
        }
    }
});

3. 在WebView的HTML中添加JS处理函数 #

在网页代码中实现接收图片并执行预裁剪的逻辑：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 若使用裁剪库，需引入对应资源，例如cropper.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

<script>
    function handleSelectedImage(base64Image) {
        // 清空裁剪容器并插入图片
        $('#crop-container').empty().html('<img src="' + base64Image + '" id="crop-image">');
        // 初始化裁剪组件
        $('#crop-image').cropper({
            aspectRatio: 1, // 设置裁剪比例，可按需调整
            viewMode: 1,
            autoCropArea: 0.8
        });
    }
</script>

<!-- 裁剪容器 -->
<div id="crop-container" style="width: 300px; height: 300px; border: 1px solid #ccc;"></div>

4. 配置WebView必要参数 #

确保WebView允许JS执行和文件访问：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);

内容的提问来源于stack exchange，提问作者Юрий Берека