Android 生成长图并添加水印（三）

2019年6月7日 294次阅读 来源: 皮卡搜

本文为生成长图系列最后一章，写一下WebView生成长图。
如有不清楚的地方，请先看下前两篇或者在下方留言交流，前两篇传送门：
1.Android 生成长图并添加水印（一）
2.Android 生成长图并添加水印（二）
还是先附上效果图，效果图是加载的我简书首页的链接：

《Android 生成长图并添加水印（三）》 WebView生成长图.jpg

布局代码就不再粘贴了，自行写个WebView就行。

直接写页面代码：
在页面初始化方法里 setContentView之前 加上：

// Android版本是5.0及以上时，调用enableSlowWholeDocumentDraw()方便截取长图
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        //一次性渲染整个html
        android.webkit.WebView.enableSlowWholeDocumentDraw();
}

这是对Android5.0以上版本WebView的变动做的适配，记得在setContentView之前。

接下来就是对长按事件的处理了：

webView.setOnLongClickListener(v -> {
        //判断加载完才能生成图片
        if (webView.getProgress() == 100) {
            //先让WebView滑到开始的位置
            webView.scrollTo(0,0);
            //生成图片
            Bitmap webViewBitmap = PhotoUtil.getWebViewBitmap(wv);
            //展示长图
            bitmapDialog = DialogUtil.showBitmapDialog(MainTestActivity.this, webViewBitmap, bitmapCallback);
        } else {
            Toast.makeText(MainTestActivity.this, "尚未加载完毕" + webView.getProgress(), Toast.LENGTH_SHORT).show();
        }
        return true;
});

之所以先让WebView滑到开始的位置，是因为生成图片时获取的是整个WebView的内容，如果布局像我上面附的效果图一样，有标题栏，标题栏以下可以滑动，当前不是在开始的位置的话，绘制时会向上绘制，生成的图片中标题栏的位置就不是在最顶端，有兴趣的可以尝试一下，这里不再附图。

PhotoUtil中getWebViewBitmap生成图片的方法：

    /**
     * WebView生成长图
     *
     * @param webView WebView控件
     * @return bitmap
     */
    public static Bitmap getWebViewBitmap(WebView webView) {
        //指定测量规则
        webView.measure(0, 0);
        //获取webView宽高
        int width = webView.getMeasuredWidth();
        int height = webView.getMeasuredHeight();
        //设置缓存机制开启
        webView.setDrawingCacheEnabled(true);
        //创建缓存
        webView.buildDrawingCache();
        //根据webView宽高创建bitmap
        Bitmap bm = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_4444);
        //创建画布
        Canvas bigCanvas = new Canvas(bm);
        //绘制内容
        webView.draw(bigCanvas);
        //绘制文字水印
        drawTextToBitmap(webView.getContext(), bigCanvas, width, height);
        return bm;
    }

这个方法跟前两篇的方法基本一致，drawTextToBitmap方法也是一样的，不一样的是文字水印是绘制在WebView生成的图片上的，之前是先绘制背景，再绘制文字，最后绘制内容。

为什么呢？
因为我做不到！
WebView绘制内容的时候是连背景一起绘制的，尝试了好多办法都不行，虽然这样看着也还行，但本文是为了分享学习，如果有做到的，欢迎留言指点。

那简书怎么做到图片黑白主题背景切换的呢？
简书用的完全就不是这种方法。

怎样才能做到跟简书一样？
1、简书App，是在html中处理了文章内容、标题、用户等数据信息，封装成了数据对象，在点击生成图片的时候获取数据填充到自定义布局中，改变主题只是改变布局的背景，分享的时候再生成长图。
2、简书网站下载长微博图片，是简书后台直接生成分享图片，并把图片链接放在html中，用户点击直接加载。
以上两点仅为个人猜测！！！

问题：
1.因为本人没有X5内核的测试机，就没对X5内核单独处理；
2.可能还有其他适配问题，个人资源有限没办法；
3.没对图片压缩，这算加载长图的范畴，可以用Luban、Compressor等第三方库；

到这里，本文就结束了，生成长图系列也结束了。
这三篇文章只是提供总结一些问题的解决办法，不足之处还有很多。
不管什么问题，欢迎在下方留言，一起学习成长！

    原文作者：皮卡搜
    原文地址: https://www.jianshu.com/p/23347328ae0d
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞