仿簡書長按文章生成圖片效果

時間  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教程