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

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

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

實現(xiàn)這個效果，首先要弄明白幾個問題：

一、如何獲取選取的網(wǎng)頁內(nèi)容
二、獲取的網(wǎng)頁內(nèi)容如何加載顯示

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

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

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);
    }

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

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

這里我是這樣處理的：首先在本地assets文件夾下創(chuàng)建一個html頁面，在頁面里加載基本的顯示內(nèi)容并添加css標(biāo)簽修飾加載的內(nèi)容，當(dāng)獲取到網(wǎng)頁內(nèi)容時，用JavaScript動態(tài)替換本地html頁面指定的對應(yīng)標(biāo)簽內(nèi)容為獲取的網(wǎng)頁內(nèi)容，并在本地html頁面里對顯示內(nèi)容進(jìn)行修飾。

看下代碼：

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+"發(fā)送 "+other+"
";
        webView.loadUrl("javascript:changeContent("" + strData.replace("
", "
").replace(""", """).replace(""", """) + "")");
        webView.setBackgroundColor(Color.WHITE);
    }

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

但這里出現(xiàn)了一個問題：當(dāng)選取的頁面內(nèi)容有圖片且圖片是以相對路徑顯示的時候就加載不到圖片了。

在這種情況下圖片是相對路徑也就是在本地對應(yīng)的相對路徑下找，本地肯定是找不到的，圖片也就顯示不出來。
為了讓圖片正常顯示出來，在選取內(nèi)容頁面調(diào)用onLoadResource方法對加載的資源進(jìn)行判斷，將圖片路徑保存下來，因為既然選取頁面圖片可以顯示處理，說明路徑是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);
            }

當(dāng)顯示選取內(nèi)容頁面顯示時動態(tài)修改顯示的圖片路徑，讓圖片顯示出來：

 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;
            }
        });

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

 /**
     * 截屏
     *
     * @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();
    }

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

到這里，基本功能就已經(jīng)實現(xiàn)了。把圖片分享給好友吧~

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