如何将图文转换成图片

前几天在看简书的时候,发现它的分享功能做的挺酷的。能够将文章转换成图片进行分享,当时觉得挺不错的,所以就研究了一下。

效果图

文章正文

转换后

需求分析

长按时弹出菜单(复制,全选,粘贴等),同时底部的生成图片分享按钮也显示出来了,点击生成图片分享按钮跳转到另一个页面,看似以图片的形式在展示,但是经过多次测试,认为还是图文内容。点击下方的分享或保存,选中的内容将以图片的方式分享或保存在手机中。对此,我们可总结出以下几点需求:

  1. 长按弹出菜单(WebView默认就可以实现);
  2. 点击生成图片分享按钮,将选中的内容传递到第二个页面中;
  3. 在第二个页面中呈现之前选中的内容;
  4. 分享或保存时将选中的内容转换成图片;

代码实现

刚开始的时候,直接使用之前写过的原生图文混排控件(打造原生的图文混排控件)来实现的,但是发现图片不能被选中,纠结了很久突然想到微信中的文章是可以全选的,那它们的图文混排应该是WebView加载的,于是分析了一下布局,果真如此。其实对于这个需求,我觉的核心就是如何将选中的内容转换成bitmap, 刚开始以为StringToBitmap就可以完成,当实践的时候发现天真了。WebView其实提供了capturePicture()函数用来获取WebView的截图。但是获取的事整个WebView的截图。觉得离需求还差一步,再看一下简书,发现它用一个巧妙的方法,即使用两步来实现这个需求。先将选中的内容传到第二个页面,然后使用WebView组件加载选中的内容,那么这时再获取WebView的截图,获取的就是选中内容生成的图片了。那么将WebView中内容转换成Bitmap就成为整个需求的核心了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
* 将WebView中的内容转换成Bitmap
*/
private Bitmap getBitmapOfWebView(final WebView webView){
Picture picture = webView.capturePicture();
Bitmap bitmap = Bitmap.createBitmap(picture.getWidth(),picture.getHeight(), Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.WHITE);
picture.draw(canvas);
saveBitmap(bitmap);

return bitmap;
}

/**
* 保存图片
*/
public void saveBitmap(Bitmap bitmap) {
if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
File sdDir = Environment.getExternalStorageDirectory();
File file = new File(sdDir, "test.png");
try {
FileOutputStream out = new FileOutputStream(file);
bitmap.compress(Bitmap.CompressFormat.PNG, 100, out);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace(System.out);
}
}
}

源码下载

WebViewToBitmapDemo

问题

其实在开发过程中,发现获取WebView的选中内容也是一个难点。因为WebView没有开放getSelection()函数。导致无法获取到选中的内容。对此问题有一些反射调用和开源库可实现,但感觉麻烦,就对上面的需求进行了修改,即选中内容后点击复制,然后再点击生成图片分享按钮,这样我们就可以通过剪切板来获取选中的内容了。

获取WebView中被选中的内容可以以下文章和开源库:

文章:Android Custom WebView Selection

开源项目:WebViewMarker

,