摘要：前幾天腦子里忽然閃過簡書的圖片分享效果，感覺很簡潔也很漂亮，想著能不能用自己方式實現一下呢，于是今天就有了這篇文章。但這里出現了一個問題當選取的頁面內容有圖片且圖片是以相對路徑顯示的時候就加載不到圖片了。

前幾天腦子里忽然閃過簡書的圖片分享效果，感覺很簡潔也很漂亮，想著能不能用自己方式實現一下呢，于是今天就有了這篇文章。好了，先看下效果圖吧：

項目地址: https://github.com/zhangke301... 歡迎star、issues~

實現這個效果，首先要弄明白幾個問題：

一、如何獲取選取的網頁內容
二、獲取的網頁內容如何加載顯示

獲取選取的網頁內容，通過Java來獲取選取的網頁內容很困難，而實現效果又必須要得到選取的網頁內容，我們可以轉換下思路，既然通過Java層不容易得到那通過JavaScript是不是要容易點呢，之后的實現確定這個思路是正確的，JavaScript很容易獲取選取的網頁內容。

那我們的思路就是：當用戶點擊生成圖片分享按鈕后，我們調用JavaScript方法獲取選取的網頁內容同時回調Java的獲取內容方法，將獲取的網頁內容回傳到Java層，我們就可以拿到網頁的內容了。
簡單看下代碼：

mWebView.addJavascriptInterface(new WebAppInterface(onGetDataListener), "JSInterface");

public void getSelectedData(WebView webView) {
        String js = "(function getSelectedText() {" +
                "var txt;" +
                "if (window.getSelection) {" +
                "var range=window.getSelection().getRangeAt(0);" +
                "var container = window.document.createElement("div");" +
                "container.appendChild(range.cloneContents());" +
                "txt = container.innerHTML;" +
                "} else if (window.document.getSelection) {" +
                "var range=window.getSelection().getRangeAt(0);" +
                "var container = window.document.createElement("div");" +
                "container.appendChild(range.cloneContents());" +
                "txt = container.innerHTML;" +
                "} else if (window.document.selection) {" +
                "txt = window.document.selection.createRange().htmlText;" +
                "}" +
                "JSInterface.getText(txt);" +
                "})()";

        // calling the js function
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            webView.evaluateJavascript("javascript:" + js, null);
        } else {
            webView.loadUrl("javascript:" + js);
        }
        webView.clearFocus();
    }
 static class WebAppInterface {
        WebViewHelper.OnGetDataListener onGetDataListener;
        WebAppInterface(WebViewHelper.OnGetDataListener onGetDataListener) {
            this.onGetDataListener = onGetDataListener;
        }
        @JavascriptInterface
        public void getText(String text) {
            onGetDataListener.getDataListener(text);
        }
    }
    public interface OnGetDataListener{
        void getDataListener(String text);
    }

上面的實現思路就是當我們要獲取選取的網頁內容時，給WebView注入一段自己寫的JavaScript腳本，這段JavaScript代碼的含義就是獲取當前頁面選取的內容包含html標簽，調用JSInterface.getText(txt)方法將內容回傳給Java的getText(String text)方法，我們設置onGetDataListener.getDataListener(text)回調方法，由需要的地方調用獲取內容。

我們已經獲取到了網頁內容，按道理其實調用TextView的setText(Html.fromHtml())這個方法就可以顯示我們選取的效果，但考慮到美觀性以及截圖保存功能、圖片的正常顯示，我選取用WebView來加載獲取的網頁內容。

這里我是這樣處理的：首先在本地assets文件夾下創建一個html頁面，在頁面里加載基本的顯示內容并添加css標簽修飾加載的內容，當獲取到網頁內容時，用JavaScript動態替換本地html頁面指定的對應標簽內容為獲取的網頁內容，并在本地html頁面里對顯示內容進行修飾。

看下代碼：

webView.loadUrl("file:///android_asset/generate_pic.html");

public void changeDay(String strData,String userInfo,String userName,String other) {
        if(userInfo == null)
            userInfo ="";
        if(strData == null)
            strData ="";
        if(userName == null)
            userName ="";
        if(other == null)
            other ="";
        strData+="


" +
                "		"+userInfo+"
" +
                "		


" +
                "		

" +
                "		

" +
                "		
由"+userName+"發送 "+other+"
";
        webView.loadUrl("javascript:changeContent("" + strData.replace("
", "
").replace(""", """).replace(""", """) + "")");
        webView.setBackgroundColor(Color.WHITE);
    }

白色和黑色不同的顯示效果實現可以在changeDay方法里改變css樣式來實現，比較簡單。

但這里出現了一個問題：當選取的頁面內容有圖片且圖片是以相對路徑顯示的時候就加載不到圖片了。

在這種情況下圖片是相對路徑也就是在本地對應的相對路徑下找，本地肯定是找不到的，圖片也就顯示不出來。
為了讓圖片正常顯示出來，在選取內容頁面調用onLoadResource方法對加載的資源進行判斷，將圖片路徑保存下來，因為既然選取頁面圖片可以顯示處理，說明路徑是http路徑，可以顯示圖片。
看下代碼：

 mWebView.setWebViewClient(new WebViewClient(){
            @Override
            public void onLoadResource(WebView view, String url) {
                //Log.e("TAG","url :"+url);
                if(url.toLowerCase().contains(".jpg")
                        ||url.toLowerCase().contains(".png")
                        ||url.toLowerCase().contains(".gif")){
                    mlistPath.add(url);
                }
                super.onLoadResource(view, url);
            }

當顯示選取內容頁面顯示時動態修改顯示的圖片路徑，讓圖片顯示出來：

 webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //view.loadUrl(url);
                return true;
            }
            public WebResourceResponse shouldInterceptRequest(WebView view,  String url) {
                WebResourceResponse response = null;
                for (String path:WebViewHelper.getInstance().getAllListPath()){
                    if (path.toLowerCase().contains(url.replace("file://","").toLowerCase())){
                        try {
                            response = new WebResourceResponse("image/png", "UTF-8", new URL(path).openStream());
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }
                }
                return response;
            }
        });

這樣，我們的圖片就可以顯示出來啦！
最后，實現我們的截圖保存功能，看下代碼：

 /**
     * 截屏
     *
     * @return
     */
    public Bitmap getScreen() {
        Bitmap bmp = Bitmap.createBitmap(webView.getWidth(), 1, Bitmap.Config.ARGB_8888);
        int rowBytes = bmp.getRowBytes();
        bmp = null;

        if (rowBytes*webView.getHeight()>=getAvailMemory()){
            return null;
        }
        bmp = Bitmap.createBitmap(webView.getWidth(), webView.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bmp);
        webView.draw(canvas);
        return bmp;
    }
   private long getAvailMemory() {
        return Runtime.getRuntime().maxMemory();
    }

這里需要對保存的圖片大小做下判斷，防止創建圖片過大OOM。

到這里，基本功能就已經實現了。把圖片分享給好友吧~

項目地址: https://github.com/zhangke301... 歡迎star、issues~