webview加载超长图

前言：android开发要经常和图片打交道。关于如何缓存，如何加载网上有很多框架。但是当我加载640*6149的长图时，实现起来效果并不理想，我用的是fresco加载。由于OpenGL渲染系统限制，Android 无法绘制长或宽大于2048像素的图片。如果它超过了这个界限，Fresco会对它进行Resize。所以当加载那个长图时，有的手机可以加载，有的就不显示。如果我对图片压缩，图片能正常加载但是不清晰。水平捉急的我，选择用webview加载长图。

1.webview加载图片的优势

• Android 本身难加载的长图，对它来说很EZ，而且很简单的就能支持缩放，不用自己添加手势监听。

settings.setBuiltInZoomControls(true); //选择内置缩放机制与单独缩放控件；
settings.setDisplayZoomControls(true); //是否显示缩放控件
settings.setSupportZoom(true);  //是否支持缩放
mWebView.setInitialScale(120); //第一次显示的缩放比例，例子是120%;

2.webview使用中的问题

图片居中显示，有4种方法：

第一种

WebSettings settings = webView.getSettings(); 
settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 

LayoutAlgorithm是一个枚举用来控制页面的布局，有三个类型：

①NARROW_COLUMNS：可能的话使所有列的宽度不超过屏幕宽度

②NORMAL：正常显示不做任何渲染

③SINGLE_COLUMN：把所有内容放大webview等宽的一列中

第二种

     settings.setUseWideViewPort(true); 
        settings.setLoadWithOverviewMode(true); 

设置加载进来的页面自适应手机屏幕 ，第一个方法设置webview推荐使用的窗口，设置为true。第二个方法是设置webview加载的页面的模式，也设置为true。这方法可以让你的页面适应手机屏幕的分辨率，完整的显示在屏幕上，可以放大缩小。虽然webview填充了，但是图片并不一定能填充屏幕。

第三种

    int screenDensity = getResources().getDisplayMetrics().densityDpi ;
    WebSettings.ZoomDensity zoomDensity = WebSettings.ZoomDensity.MEDIUM ;
    switch (screenDensity){
        case DisplayMetrics.DENSITY_LOW :
            zoomDensity = WebSettings.ZoomDensity.CLOSE;
            break;
        case DisplayMetrics.DENSITY_MEDIUM:
            zoomDensity = WebSettings.ZoomDensity.MEDIUM;
            break;
        case DisplayMetrics.DENSITY_HIGH:
            zoomDensity = WebSettings.ZoomDensity.FAR;
            break ;

    }

根据屏幕像素适配，但是只适配了L、M、H，XH等往上的密度没适配。

第四种

这种适配图片效果是最好的，通过js修改图片宽度。一定要加上：

settings.setJavaScriptEnabled(true);

代码如下：

 class  WC extends WebViewClient {

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);

        imgReset();
        if(mDialog !=null && mDialog.isShowing())
            mDialog.dismiss();


    }

    @Override
    public void onScaleChanged(WebView view, float oldScale, float newScale) {
        super.onScaleChanged(view, oldScale, newScale);
    }
}


/**
 * 循环遍历标签中的图片
 * js 语法
 */
private void imgReset() {
    mWebView.loadUrl("javascript:(function(){" +
            "var objs = document.getElementsByTagName('img'); " +
            "for(var i=0;i<objs.length;i++)  " +
            "{"
            + "var img = objs[i];   " +
            "    img.style.maxWidth = '100%';   " +
            "}" +
            "})()");
}