美文网首页android程序员Android开发经验谈
Android 生成长图并添加水印(三)

Android 生成长图并添加水印(三)

作者: 皮卡搜 | 来源:发表于2018-02-07 18:00 被阅读301次

    本文为生成长图系列最后一章,写一下WebView生成长图。
    如有不清楚的地方,请先看下前两篇或者在下方留言交流,前两篇传送门:
    1.Android 生成长图并添加水印(一)
    2.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等第三方库;

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

    相关文章

      网友评论

        本文标题:Android 生成长图并添加水印(三)

        本文链接:https://www.haomeiwen.com/subject/zveozxtx.html