php h5长按图片实现保存功能,WebView 实现长按保存图片

最近在做一个红包活动，要求实现长按图片保存到相册以及分享的功能。查询了网上的一些实现后，整理成这篇文章。

主要步骤如下：

WebView添加OnLongClickListener

识别长按的元素类型，如果是图片，弹出AlertDialog

选择保存或是分享图片

代码如下：

webView.setOnLongClickListener(v -> {

final WebView.HitTestResult hitTestResult = webView.getHitTestResult();

// 如果是图片类型或者是带有图片链接的类型

if (hitTestResult.getType() == WebView.HitTestResult.IMAGE_TYPE ||

hitTestResult.getType() == WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE) {

// 弹出保存图片的对话框

new AlertDialog.Builder(WebActivity.this)

.setItems(new String[]{"保存图片到本地", "分享图片"}, (dialog, which) -> {

String pic = hitTestResult.getExtra();//获取图片

switch (which) {

case 0:

//保存图片到相册

new Thread(() -> saveImage(pic)).start();

break;

case 1:

// 分享图片，这里用RxJava处理异步

Observable.create((Observable.OnSubscribe) subscriber -> subscriber.onNext(webData2bitmap(pic)))

.subscribeOn(Schedulers.computation())

.observeOn(AndroidSchedulers.mainThread())

.subscribe(bitmap -> {

try {

Intent intent = new Intent(Intent.ACTION_SEND);

intent.setType("image/*");

intent.putExtra(Intent.EXTRA_STREAM, getImageUri(WebActivity.this, bitmap));

startActivity(Intent.createChooser(intent, "分享图片"));

} catch (Exception e) {

e.printStackTrace();

Util.makeText(WebActivity.this, "分享失败");

}

}, throwable -> {

throwable.printStackTrace();

Util.makeText(WebActivity.this, "分享失败");

});

break;

}

})

.show();

return true;

}

return false;//保持长按可以复制文字

});

public void saveImage(String data) {

try {

Bitmap bitmap = webData2bitmap(data);

if (bitmap != null) {

save2Album(bitmap, new SimpleDateFormat("SXS_yyyyMMddHHmmss", Locale.getDefault()).format(new Date()) + ".jpg");

} else {

runOnUiThread(() -> Toast.makeText(WebActivity.this, "保存失败", Toast.LENGTH_SHORT).show());

}

} catch (Exception e) {

runOnUiThread(() -> Toast.makeText(WebActivity.this, "保存失败", Toast.LENGTH_SHORT).show());

e.printStackTrace();

}

}

public Uri getImageUri(Context inContext, Bitmap inImage) {

ByteArrayOutputStream bytes = new ByteArrayOutputStream();

inImage.compress(Bitmap.CompressFormat.JPEG, 100, bytes);

String path = MediaStore.Images.Media.insertImage(inContext.getContentResolver(), inImage, "Title", null);

return Uri.parse(path);

}

public Bitmap webData2bitmap(String data) {

byte[] imageBytes = Base64.decode(data.split(",")[1], Base64.DEFAULT);

return BitmapFactory.decodeByteArray(imageBytes, 0, imageBytes.length);

}

private void save2Album(Bitmap bitmap, String fileName) {

File file = new File(Environment.getExternalStoragePublicDirectory(DIRECTORY_DCIM), fileName);

FileOutputStream fos = null;

try {

fos = new FileOutputStream(file);

bitmap.compress(Bitmap.CompressFormat.JPEG, 100, fos);

fos.flush();

fos.close();

runOnUiThread(() -> {

sendBroadcast(new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE, Uri.fromFile(file)));

Util.makeText(WebActivity.this, "保存成功", Toast.LENGTH_SHORT);

});

} catch (Exception e) {

runOnUiThread(() -> Util.makeText(WebActivity.this, "保存失败", Toast.LENGTH_SHORT));

e.printStackTrace();

} finally {

try {

fos.close();

} catch (Exception ignored) {

}

}

}

网上别的很多文章中，hitTestResult.getExtra()获取到的是图片的Url网址，而我们前端页面获取到的是base64编码后的data字段，需要将data还原成字节数组，再解码成Bitmap才能保存或者分享(data字段带有格式信息，也可直接将解码后的字节数组写入磁盘)。