实现仿简书选取内容生成分享图片效果

前几天脑子里忽然闪过简书的图片分享效果，感觉很简洁也很漂亮，想着能不能用自己方式实现一下呢，于是今天就有了这篇文章。好了，先看下效果图吧：

GeneratePicture

项目地址: https://github.com/zhangke301... 欢迎star、issues~

实现这个效果，首先要弄明白几个问题：

一、如何获取选取的网页内容
二、获取的网页内容如何加载显示

GeneratePicture

一、如何获取选取的网页内容

获取选取的网页内容，通过Java来获取选取的网页内容很困难，而实现效果又必须要得到选取的网页内容，我们可以转换下思路，既然通过Java层不容易得到那通过JavaScript是不是要容易点呢，之后的实现确定这个思路是正确的，JavaScript很容易获取选取的网页内容。

那我们的思路就是：当用户点击生成图片分享按钮后，我们调用JavaScript方法获取选取的网页内容同时回调Java的获取内容方法，将获取的网页内容回传到Java层，我们就可以拿到网页的内容了。
简单看下代码：

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 functionif (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;}@JavascriptInterfacepublic void getText(String text) {onGetDataListener.getDataListener(text);}}public interface OnGetDataListener{void getDataListener(String text);}

上面的实现思路就是当我们要获取选取的网页内容时，给WebView注入一段自己写的JavaScript脚本，这段JavaScript代码的含义就是获取当前页面选取的内容包含html标签，调用JSInterface.getText(txt)方法将内容回传给Java的getText(String text)方法，我们设置onGetDataListener.getDataListener(text)回调方法，由需要的地方调用获取内容。

二、获取的网页内容如何加载显示

我们已经获取到了网页内容，按道理其实调用TextView的setText(Html.fromHtml())这个方法就可以显示我们选取的效果，但考虑到美观性以及截图保存功能、图片的正常显示，我选取用WebView来加载获取的网页内容。

这里我是这样处理的：首先在本地assets文件夹下创建一个html页面，在页面里加载基本的显示内容并添加css标签修饰加载的内容，当获取到网页内容时，用JavaScript动态替换本地html页面指定的对应标签内容为获取的网页内容，并在本地html页面里对显示内容进行修饰。

看下代码：

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+="<br /><br />\n" +"\t\t<span style=\"font-size: small;color: gray;line-height:150%;\">"+userInfo+"</span>\n" +"\t\t<br /><br />\n" +"\t\t<hr style=\"margin: auto;border:0;background-color:gray;height:1px;\"/>\n" +"\t\t<br />\n" +"\t\t<p style=\"color: orangered;font-size: x-small;text-align: center;letter-spacing: 0.5px;\">由<strong>"+userName+"</strong>发送 "+other+"</p>";webView.loadUrl("javascript:changeContent(\"" + strData.replace("\n", "\\n").replace("\"", "\\\"").replace("'", "\\'") + "\")");webView.setBackgroundColor(Color.WHITE);}

白色和黑色不同的显示效果实现可以在changeDay方法里改变css样式来实现，比较简单。

但这里出现了一个问题：当选取的页面内容有图片且图片是以相对路径显示的时候就加载不到图片了。

在这种情况下图片是相对路径也就是在本地对应的相对路径下找，本地肯定是找不到的，图片也就显示不出来。
为了让图片正常显示出来，在选取内容页面调用onLoadResource方法对加载的资源进行判断，将图片路径保存下来，因为既然选取页面图片可以显示处理，说明路径是http路径，可以显示图片。
看下代码：

 mWebView.setWebViewClient(new WebViewClient(){@Overridepublic 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);}

当显示选取内容页面显示时动态修改显示的图片路径，让图片显示出来：

 webView.setWebViewClient(new WebViewClient(){@Overridepublic 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;}});

这样，我们的图片就可以显示出来啦！
最后，实现我们的截图保存功能，看下代码：

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

这里需要对保存的图片大小做下判断，防止创建图片过大OOM。

到这里，基本功能就已经实现了。把图片分享给好友吧~

项目地址: https://github.com/zhangke301... 欢迎star、issues~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/283702.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

千万级可观测数据采集器--iLogtail代码完整开源

千万级可观测数据采集器--iLogtail代码完整开源

2022年6月29日&#xff0c;阿里云iLogtail开源后迎来首次重大更新&#xff0c;正式发布完整功能的iLogtail社区版。本次更新开源全部C核心代码&#xff0c;该版本在内核能力上首次对齐企业版&#xff0c;开发者可以构建出与企业版性能相当的iLogtail云原生可观测性数据采集器。…
阅读更多...
Java8新特性--CompletableFuture

Java8新特性--CompletableFuture

并发与并行 Java 5并发库主要关注于异步任务的处理&#xff0c;它采用了这样一种模式&#xff0c;producer线程创建任务并且利用阻塞队列将其传递给任务的consumer。这种模型在Java 7和8中进一步发展&#xff0c;并且开始支持另外一种风格的任务执行&#xff0c;那就是将任务的…
阅读更多...
python list对象

python list对象

def append(self, p_object): # real signature unknown; restored from __doc__ """ L.append(object) -> None -- append object to end """ passappend函数将字符串插入到列表自身的末尾def clear(self): # real signature unknown; resto…
阅读更多...
用 MAUI 在Windows 和 Linux 绘制 PPT 图表

用 MAUI 在Windows 和 Linux 绘制 PPT 图表

我在做一个图表工具软件&#xff0c;这个软件使用 MAUI 开发。我的需求是图表的内容需要和 PPT 的图表对接&#xff0c;需要用到 OpenXML 解析 PPT 内容&#xff0c;读取到 PPT 图表元素的内容&#xff0c;接着使用 MAUI 渲染层绘制图表元素。图表工具软件需要在 Windows 平台和…
阅读更多...
初窥Servlet

初窥Servlet

1. Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术。sun公司在其API中提供了一个servlet接口&#xff0c;用户若想要发一个动态web资源&#xff0c;只需要完成以下两步即可&#xff1a; 1&#xff09;编写一个servlet&#xff0c;即实现servlet接口的Java类…
阅读更多...
聊聊接口性能优化的11个小技巧

聊聊接口性能优化的11个小技巧

前言 接口性能优化对于从事后端开发的同学来说&#xff0c;肯定再熟悉不过了&#xff0c;因为它是一个跟开发语言无关的公共问题。 该问题说简单也简单&#xff0c;说复杂也复杂。 有时候&#xff0c;只需加个索引就能解决问题。 有时候&#xff0c;需要做代码重构。 有时…
阅读更多...
三元表达式，递归，匿名函数，内置函数

三元表达式，递归，匿名函数，内置函数

一 、三元表达式 只应用于条件成立返回一个值&#xff0c;条件不成立返回另一个值。　　 示例&#xff1a;　　　　nameinput(姓名>>: )　　　　resSB if name alex else NB　　　　print(res) 注&#xff1a;通常使用场合为特别简单一眼读懂的地方。二…
阅读更多...
ElasticSearch远程随意代码运行漏洞(CVE-2014-3120)分析

ElasticSearch远程随意代码运行漏洞(CVE-2014-3120)分析

原理 这个漏洞实际上非常easy&#xff0c;ElasticSearch有脚本运行(scripting)的功能&#xff0c;能够非常方便地对查询出来的数据再加工处理。 ElasticSearch用的脚本引擎是MVEL&#xff0c;这个引擎没有做不论什么的防护&#xff0c;或者沙盒包装&#xff0c;所以直接能够运行…
阅读更多...
《Effective Java》—— 对于所有对象都通用的方法

《Effective Java》—— 对于所有对象都通用的方法

本节主要涉及Object中通用的一些方法&#xff0c;比如equals,hashCode,toString,clone,finalize等等 覆盖equals时请遵守通用约定 equals方法实现的等价关系&#xff1a; 自反性&#xff1a;对于所有的非null&#xff0c;aa对称性&#xff1a;ab,则ba传递性&#xff1a;ab,bc,则…
阅读更多...
.net core实现读取自定义配置文件

.net core实现读取自定义配置文件

背景在.net core类库中读取配置文件&#xff0c;正常来讲我们在应用程序目录下有个appsettings.json文件对于相关配置都会放在这个json文件中&#xff0c;但是要是建立一个类库项目&#xff0c;对于一些配置比如密钥或者其他需要硬编码的数据放在JSON文件中&#xff0c;在.net …
阅读更多...
Java中ArrayList,LinkedList,Vector三者的异同点及其使用场景和ArrayList的一些常用方法

Java中ArrayList,LinkedList,Vector三者的异同点及其使用场景和ArrayList的一些常用方法

相同点&#xff1a;三者存储的都是有序&#xff0c;可重复的数据。 异&#xff1a; ①&#xff1a;ArrayList底层存储类型是Object数组&#xff0c;而LinkedList底层是双向链表 ②&#xff1a;ArrayList和Vector调用创建空参构造器创建对象时&#xff0c;默认的size是10&…
阅读更多...
第二百四十六节，Bootstrap弹出框和警告框插件

第二百四十六节，Bootstrap弹出框和警告框插件

Bootstrap弹出框和警告框插件 学习要点&#xff1a; 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件。 一&#xff0e;弹出框 弹出框即点击一个元素弹出一个包含标题和内容的容器。 基本用法 注意&#xff1a;必须在js结合popover()方法使用 da…
阅读更多...
Intellij IDEA2017 的控制台里不识别maven命令问题处理

Intellij IDEA2017 的控制台里不识别maven命令问题处理

2019独角兽企业重金招聘Python工程师标准>>> cmd里运行 mvn -v可以显示出maven的版本信息&#xff0c;可是在IDEA的控制台里却提示不识别maven命令&#xff0c;此情况以管理员的身份运行IDEA即可。 转载于:https://my.oschina.net/u/2364025/blog/1788797
阅读更多...
使用IDEA 提交代码到svn

使用IDEA 提交代码到svn

2019独角兽企业重金招聘Python工程师标准>>> 新手第一次使用教程&#xff1a; 一、安装svn TortoiseSVN是个客户端&#xff0c;需要安装VisualSVN服务端。 二、IDEA配置&#xff08;Ctrl alt S&#xff09; 需要配置服务端svn.exe文件。 三、上传代码 svn路径&…
阅读更多...
如何在 BackgroundService 获取 ASP.NET Core 启动地址

如何在 BackgroundService 获取 ASP.NET Core 启动地址

前言上次&#xff0c;我们介绍了《如何获取 ASP.NET Core 启动地址》。但是&#xff0c;如果要在 BackgroundService 中获取启动地址可不那么容易&#xff0c;因为 BackgroundService 在 app 启动前就开始执行了:var builder WebApplication.CreateBuilder(args); builder.Ser…
阅读更多...
JDK8 循环遍历list

JDK8 循环遍历list

简介 Java 8 API添加了一个新的抽象称为流Stream&#xff0c;可以让你以一种声明的方式处理数据。Stream 使用一种类似用 SQL 语句从数据库查询数据的直观方式来提供一种对 Java 集合运算和表达的高阶抽象。 这种风格将要处理的元素集合看作一种流&#xff0c; 流在管道中传输&…
阅读更多...
2016 校园招聘求职经历（二）

2016 校园招聘求职经历（二）

概述 航信是一家国企&#xff0c;给人的印象是比较踏实&#xff0c;不过也感觉缺乏活跃性。我是航信第一批校招去&#xff0c;同样它也是我面试的第一家公司。 宣讲会 9月27日&#xff0c;下午2&#xff1a;30开始宣讲会&#xff0c;大约持续了30分钟左右&#xff0c;整个感觉是…
阅读更多...
016-Spring Boot JDBC

016-Spring Boot JDBC

一、数据源装配 通过查看代码可知&#xff0c;默认已装配了数据源和JdbcTemplate System.out.println(context.getBean(DataSource.class)); System.out.println(context.getBean(JdbcTemplate.class)); 1.1、环境搭建 主要是pom引用&#xff1a;spring-boot-starter-jdbc、增加…
阅读更多...
分库分表和 NewSQL 到底怎么选？

分库分表和 NewSQL 到底怎么选？

文章来源&#xff1a;【公众号&#xff1a;CoderW】 目录 背景 分表 分库 分库分表的成本 NewSQL NewSQL 平滑接入方案 NewSQL 真的有那么好吗&#xff1f; NewSQL 的应用 分库分表和 NewSQL 到底怎么选&#xff1f; 背景 曾几何时&#xff0c;“并发高就分库&#xff…
阅读更多...
JsonPath基本使用

JsonPath基本使用

概述在.Net开发中&#xff0c;一般操作Json都是使用Newtonsoft.Json包&#xff0c;下面我们来使用该包以类似xpath的方式JsonPath操作Json。介绍JsonPath是xpath在json中的应用&#xff0c;是参照xpath表达式来解析xml文档的方式&#xff0c;用一个抽象的名字$来表示最外层的对…
阅读更多...
最新文章

Copyright @ 2022~2023