android webview H5开发若干问题之问题五：复制网页图片

这里的图片问题，涉及到webview加载网页中的图片的加载问题、图片的地址复制、图片保存本地等等，其实这些做到了，也就可以进行分享等操作了。

先加载文本后加载图片。

先加载文本后加载图片，会有很好的用户体验。实现这个功能，原理很简单，１、在加载网页之前阻塞图片加载，在加载完毕之后，再关闭图片阻塞，并开启图片加载。

具体：

１、

阻塞加载图片，就一个方法。

２、

在重写WebViewClient中　onPageFinished方法，阻塞停止，然后加载图片。

复制加载H5中的图片

此功能实现类似在UC浏览器上，长按图片，复制图片地址，或者保存图片到本地。

1、使用PopupWindow 加载处理图片按钮列表。因为PopupWindow 会更灵活的放置于某个控件的相对位置。这里，因为是我们要在我们点击的位置下方show　PopupWindow。

贴出：

package com.xiaoyunchengzhu.androidandh5.webviewpakage;

import android.annotation.TargetApi;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.ClipData;
import android.content.ClipboardManager;
import android.content.DialogInterface;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Build;
import android.os.Environment;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.CookieManager;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.PopupWindow;
import android.widget.SeekBar;
import android.widget.Toast;

import com.xiaoyunchengzhu.androidandh5.R;
import com.xiaoyunchengzhu.httpapi.http.HttpApi;
import com.xiaoyunchengzhu.httpapi.net.APIManager;
import com.xiaoyunchengzhu.httpapi.net.Api;
import com.xiaoyunchengzhu.httpapi.net.BitmapCallBackResult;
import com.xiaoyunchengzhu.httpapi.net.CallBackResult;

import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLConnection;

import static android.content.Context.CLIPBOARD_SERVICE;


/**
 * Created by TL on 2016/5/31.
 */
public class WebViewManger implements View.OnClickListener{

    private WebView webView;
    private WebViewActivity activity;

    public WebViewManger(WebViewActivity activity, WebView webView) {
        this.webView = webView;
        this.activity = activity;
        inite();
    }

    //{"app":"TongLian","systemVersion":"8.0","systemPlatform":"android"}          user-agent
    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    private void inite() {
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setAllowFileAccess(true);
        webView.getSettings().setAllowFileAccessFromFileURLs(true);
        //添加useragent
        String ua = webView.getSettings().getUserAgentString();
        webView.getSettings().setUserAgentString(ua + " " + "");
        //阻塞加载图片
        webView.getSettings().setBlockNetworkImage(true);
        webView.setWebChromeClient(new CustomWebChromClient(activity, WebViewActivity.FILECHOOSER_RESULTCODE, WebViewActivity.REQUEST_SELECT_FILE));
        webView.addJavascriptInterface(new AndroidToJs(activity, webView), "LocalNative");
        setCookie();
        imageInit();
    }

    public void load(String url) {
        webView.loadUrl(url);
    }

    public void goBack() {
        webView.goBack();
    }

    public boolean canGoBack() {
        return webView.canGoBack();
    }
    void setCookie(){
        CookieManager cookieManager = CookieManager.getInstance();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            cookieManager.setAcceptThirdPartyCookies(webView, true);
        } else {
            cookieManager.setAcceptCookie(true);
        }
        CookieManager.setAcceptFileSchemeCookies(true);
        cookieManager.setCookie("www.chehngzhu.com","name:chengzhu;password:123456");
        Log.i("cookie",cookieManager.getCookie("www.chehngzhu.com"));
    }
    private String picUrl=null;
    private int x,y;
    private PopupWindow mPopWindow;
    private
    void imageInit(){
        mPopWindow=new PopupWindow(activity);
        View contentView = LayoutInflater.from(activity).inflate(R.layout.pop_img, null);
        mPopWindow = new PopupWindow(contentView,
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, true);
        mPopWindow.setContentView(contentView);
        Button save= (Button) contentView.findViewById(R.id.btn_save);
        Button cp= (Button) contentView.findViewById(R.id.btn_cp);
        Button cancel= (Button) contentView.findViewById(R.id.btn_cancel);
        save.setOnClickListener(this);
        cp.setOnClickListener(this);
        cancel.setOnClickListener(this);
        webView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                x= (int) event.getX();
                y= (int) event.getY();
                return false;
            }
        });

        webView.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                 WebView.HitTestResult hitTestResult = webView.getHitTestResult();
                // 如果是图片类型或者是带有图片链接的类型
                if (hitTestResult.getType() == WebView.HitTestResult.IMAGE_TYPE ||
                        hitTestResult.getType() == WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE) {
                    picUrl = hitTestResult.getExtra();
                    mPopWindow.showAtLocation(webView, Gravity.TOP|Gravity.LEFT, x, y);
                    return true;
                }
                return false;
            }
        });
    }
    public void savePic(String url) {
        APIManager.createApi(new HttpApi(url)).execute(new BitmapCallBackResult() {
            @Override
            public void success(Api api, Bitmap result) {
                saveBitmap(result);
            }

            @Override
            public void failure(Api api, String error) {
                Toast.makeText(activity, "保存失败", Toast.LENGTH_SHORT).show();
            }
        });

    }
    private void saveBitmap(Bitmap bitmap) {
        File appDir = new File(Environment.getExternalStorageDirectory(), "com.xiaoyunchengzhu.androidandh5");
        if (!appDir.exists()) {
            appDir.mkdir();
        }
        String[] str = picUrl.split("/");
        String fileName = str[str.length - 1];
        if (fileName.length()>20) {
            fileName=fileName.substring(fileName.length()-10,fileName.length());
        }
        File file = new File(appDir, fileName);
        if (!file.exists()){
            try {
                file.createNewFile();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        try {
            FileOutputStream fos = new FileOutputStream(file);
            bitmap.compress(Bitmap.CompressFormat.JPEG, 100, fos);
            fos.flush();
            fos.close();
            activity.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(activity, "保存成功", Toast.LENGTH_SHORT).show();
                }
            });
        } catch (IOException e) {
            activity.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(activity, "保存失败", Toast.LENGTH_SHORT).show();
                }
            });
            e.printStackTrace();
        }
    }



    @Override
    public void onClick(View v) {
        switch (v.getId()){
            //保存本地
            case R.id.btn_save:

                savePic(picUrl);
                mPopWindow.dismiss();
                break;
                //复制粘贴板
            case R.id.btn_cp:
                ClipboardManager mClipboardManager =
                        (ClipboardManager) activity.getSystemService(CLIPBOARD_SERVICE);
                ClipData mClipData;
                mClipData = ClipData.newPlainText("test", picUrl);
                mClipboardManager.setPrimaryClip(mClipData);
                Toast.makeText(activity, "复制成功", Toast.LENGTH_SHORT).show();
                mPopWindow.dismiss();
                break;
            case R.id.btn_cancel:
                if (mPopWindow!=null){
                    mPopWindow.dismiss();
                }
                break;
        }
    }
}

R.layout.pop_img 的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f5f5f5f5"
    android:orientation="vertical">

    <TextView
        android:text="图片处理"
        android:gravity="center"
        android:background="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn_save"
        android:text="保存图片"
        android:gravity="center"
        android:background="@drawable/item_bg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    <Button
        android:id="@+id/btn_cp"
        android:text="复制图片地址"
        android:gravity="center"
        android:background="@drawable/item_bg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn_cancel"
        android:text="取消操作"
        android:gravity="center"
        android:background="@drawable/item_bg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

监听webview的触摸事件，是为了获取点击的位置，监听长按，是真正的触发处理图片的事件。

savePic方法中的ApiManger 是另一套请求工具。

使用方法是在gradle中配置：

compile 'com.xiaoyunchengzhu:httpapi:1.0.3'　此库有些简陋，也有一些bug,一直没有更新版本。简单的使用还是可以的。

保存图片的地址是　com.xiaoyunchengzhu.androidandh5 /文件夹下。复制粘贴板用的ClipboardManager ,可以直接复制本图片的网络地址，然后在其它的文本编辑地方可以黏贴。

附github

AndroidAndH5:https://github.com/xiaoyunchengzhu/AndroidAndH5

请求框架：

HttpApiDemo:https://github.com/xiaoyunchengzhu/HttpApiDemo