仿简书长按文章生成图片效果

时间  2019-11-26
标签 文章 生成 图片 效果 繁體版
原文   原文链接

前言

使用简书APP的同窗都知道，简书有这样一个功能；文章页长按内容时底部会出现一个生成图片分享的按钮，点击以后就能够将当前的文章生成一张长图片；这张图片能够保存到本地或分享给好友，同时还可为图片设置成为白和黑两种风格，颇有艺术范。我的一直很喜欢这个功能。javascript

可是从某一个版本开始，这个功能开始有bug了，生成的图片只有底部的固定标题，而没有文章内容，长图也变成了小短图。向简书意见反馈后，获得的回复是，使用点击分享按钮生成图片功能；分享菜单包含的生成长图功能的确是能够的。可是，仍是很怀念以前长按生成图片的功能，因此做为一名程序猿；怀着好奇的心情，决定本身去实现这样一个功能.html

效果预览

老规矩，首先看一下实现后的效果；虽然总体没有简书有范，我的感受仍是挺像的。java

效果图

文章页实现

内容

文章页内容的实现，没有什么难点。布局总的来讲很简单，包含户信息和文章信息的一个LinearLayout，外加一个WebView便可。数据是根据布局中所需的内容，封装了一个HtmlBean 对象，而这个对象的则是经过使用Jsoup 解析当前页面的HTML文档内容得到（这里使用Jsoup 方式获取简书网页内容，只是我的学习，没有其余用意）。具体实现可查看源码android

长按菜单实现

这里特地说一下，长按弹出底部按钮的实现方式。通常状况下对于长按效果的实现，咱们都会经过设置View的OnLongClickListene事件去实现相应的功能，可是对于这里的WebView能够以下实现：git

mWebView.setOnCreateContextMenuListener(new View.OnCreateContextMenuListener() {
            @Override
            public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
                genImg.setVisibility(View.VISIBLE);
                T.showSToast(mContext, "再次点击文章可隐藏图片分享");
            }
        });
        // 点击隐藏底部按钮
        mWebView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        lastTime = SystemClock.uptimeMillis();
                        break;
                    case MotionEvent.ACTION_UP:
                        if (SystemClock.uptimeMillis() - lastTime < 300) {
                            genImg.setVisibility(View.GONE);
                        }
                        break;
                }
                return false;
            }
        });复制代码

这里经过监听WebView的ContextMenu 监听什么时候显示底部按钮；同时在onTouch方法中隐藏底部按钮。github

genImg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                genImg.setVisibility(View.INVISIBLE);
                Intent intent = new Intent(FakeJianShuActivity.this, GenScreenShotActivity.class);
                intent.putExtra("data", mHtmlBean);
                startActivity(intent);
            }
        });复制代码

点击底部的Button就会跳转到生成长图的界面，同时将以前获取到的HTMLBean对象传递过去。web

长图效果实现

这里首先说一下实现思路（思路来源于此）。canvas

  • 首先经过WebView加载一个本地的Html页面，这个页面包含一些固定，定义了一些标签。而后根据传递过来的mHtmlBean 对象中的信息，经过执行JavaScript动态的替换静态HTML页面中的内容；
  • 关于黑白两种风格的实现，一样是WebView执行Js，动态替换HTML中CSS 样式，修改WebView的背景色呈现出两种不一样的UI 效果。
  • 经过WebView的capturePicture 和Canvas 能够生成出当前WebView的Bitmap对象，有了这个Bitmap就能够图片保存的功能了。

好了，下面就经过代码分别实现上述步骤。ide

Html 页面（JianShu.html）

<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
<img src="mark.png" width="13px" height="20px" style="position:absolute;top: 0px;left: 12px;margin-bottom: 15px;"/>
<article id="content" style="margin: 25px;"></article>
<script type="text/javascript"> function changeContent(content) { document.getElementById('content').innerHTML = content; } </script>
</body>
</html>复制代码

这个HTML页面的内容很简单，在整个文档左上角放置了一个小角标，就是简书APP生成长图时的那个mark.
同时定义了一个JavaScript 方法，功能也很简单，就是用传递的参数content替换article标签中的文档内容。 布局

自定义WebView

为了方便，咱们自定义WebView，这里看一下核心逻辑：

public class FakeWebView extends WebView {

    private boolean isFirstLoad = false;

    public void loadData(HtmlBean bean) {
        assembleData(bean);
        if (Build.VERSION.SDK_INT >= 21) {
            isFirstLoad = true;
            webView.setWebChromeClient(new WebChromeClient() {
                @Override
                public void onProgressChanged(WebView view, int newProgress) {
                    if (newProgress == 100) {
                        if (isFirstLoad) {
                            isFirstLoad = false;
                            Log.e("TAG", "onProgressChanged");
                            updateView();
                        }
                    }
                }
            });
        } else {
            isFirstLoad = true;
            webView.setVisibility(View.INVISIBLE);

            webView.setWebChromeClient(new WebChromeClient() {
                @Override
                public void onProgressChanged(WebView view, int newProgress) {
                    if (newProgress == 100) {
                        updateView();
                        if (!isFirstLoad)
                            webView.setVisibility(View.VISIBLE);
                    }
                }
            });
        }
        webView.loadUrl("file:///android_asset/JianShu.html");

    }

    private void assembleData(HtmlBean bean) {
        final String data = bean.getContent();
        final String title = bean.getTitle();
        final String username = bean.getUsername();
        final String publishTime = bean.getPublishTime();
        String Title = "<h2>" + title + "</h2>";
        String Footer = "<p>" + username + "</p><p>" + publishTime + "</p>";
        content = Title + data + Footer;
    }


    public void updateView() {
        if (mode == MODE_DAY) {
            webView.setBackgroundColor(Color.WHITE);
        } else {
            webView.setBackgroundColor(Color.parseColor("#263238"));
            content = "<div style=\"color: gray;display: inline;\">" + content + "</div>";
        }
        webView.loadUrl("javascript:changeContent(\"" + content.replace("\n", "\\n").replace("\"", "\\\"").replace("'", "\\'") + "\")");
    }
}复制代码

这几个方法是生成长图最核心的方法。在loadData 方法中首先调用了assembleData，这个方法会根据mHtmlBean 这个对象中的数据拼接出一段 HTML 文档。在webView的loadUrl 方法中会从本地加载以前定义好的JianShu.html这个页面。而后在页面加载完成，即onProgressChanged 回调方法中newProgress 的值等于100时调用updateView方法；这个方法会根据当前设置的模式，设置WebView的背景，若是是夜间模式，则会对assembleData 中生成的文档外部在添加 一个灰色风格的div标签，将整个内容包在这个div标签中，最后WebView执行JS方法 changeContent，传递的参数就是以前咱们拼接好的内容。这样整个WebView又会刷新一次，整个WebView的内容就是文章内容了。

GenScreenShotActivity

mFakeWebView = (FakeWebView) findViewById(R.id.fakeWebView);
        bean = (HtmlBean) getIntent().getSerializableExtra("data");
        RadioGroup changeMode = (RadioGroup) findViewById(R.id.changeMode);
        changeMode.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
                if (checkedId == R.id.rb_day) {
                    mFakeWebView.setMode(FakeWebView.MODE_DAY);
                } else {
                    mFakeWebView.setMode(FakeWebView.MODE_NIGHT);
                }
            }
        });
        mFakeWebView.loadData(bean);

      /** * @param mode */
    public void setMode(@ViewMode int mode) {
        this.mode = mode;
        updateView();
    }复制代码

这样在Activity中，mFakeWebView对象经过上一个页面（文章页）传递的mHtmlBean 对象就能够更新当前视图了，同时能够经过RadioButton实现页面风格的切换。

保存图片

距离咱们最后的目标生成长图片，前面的工做能够说只是完成了50%，由于到目前为止咱们只不过是在WebView中把整个文章内容加载出来而已；长图尚未呢。所以，下面的工做就是经过WebView 生成长图。

public Bitmap getScreenView(){
        Picture snapShot = webView.capturePicture();
        Bitmap bmp = Bitmap.createBitmap(snapShot.getWidth(),snapShot.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bmp);
        snapShot.draw(canvas);
        return bmp;
    }复制代码

WebVeiw 很人性化，经过这个方法，咱们就能够得到当前WebView视图可见与不可见部分的Bitmap了。
其实经过WebView生成图片并非一件难事，可贵是如何把咱们这里的图片保存下来；由于咱们这里生成的是长图，以下图所示，这张照片的高度达到了惊人的。所以这里就要须要以前在Bitmap 初探中提到的第一种压缩方法进行文件大小的压缩了。具体实现，就再也不重复贴出代码了，有兴趣的同窗可参考文末Github源码。

到这里，咱们就彻底实现了仿照简书长按生成图片的功能。那么回过头再来看，这样一个功能，为何在个人手机上，简书APP的长按功能会有bug呢。

缺陷

文章详情页的WebView是系统自带的WebView，在加载带 代码的文章时，没有对代码类的内容作特殊的解析，所以没法对代码高亮显示。只是最为普通的文本进行了显示，所以生成的长图中代码也是普通文本。简书APP仍是高大上呀，对代码的高亮显示正是棒棒哒！

后话

一个偶然的机会，在尝试简书长按生成图片的功能时发现，原来简书是经过WebView选择的区域生成第二页的内容；所以当我在文章页空白区域长按后，点击生成图片时必然是只有空白的，只有底部的一些固定标签。所以，这应该不算是一个bug，只是为你们提供了一种更方便的功能，能够按本身喜欢的内容生成更有效的长图。

最后 Github AndroidAnimationExercise，这是一个日常本身学习Android各类动画、自定义View的集合项目，有兴趣的同窗欢迎 star & fork 。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程