项目需求 :Android 展示Html保单模版页面, 类似于这种界面

屏幕快照 2017-11-07 下午4.02.11.png

然后调用签名(其实就一个绘画的窗口),签上你的大名,点击确定。展示签名图片。然后把图片中签字后面的signCustName替换成签名图片。

Screenshot_20171107-160916.png
Screenshot_20171107-160940.png
Screenshot_20171107-160955.png
Screenshot_20171107-161004.png
html 展示我用的WebView,路径在res下创建raw文件。如果html放在assets目录下file///android_assets/test.html。
public static final String URL = "file:///android_res/raw/test.html";
webView = (WebView) findViewById(R.id.signature_webview);
WebSettings settings = webView.getSettings();
//支持JavaScript
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(false); //支持通过JS打开新窗口
settings.setSupportZoom(true);//支持缩放,默认为true。是下面那个的前提。
settings.setBuiltInZoomControls(true);//设置内置的缩放控件。若为false,则该WebView不可缩放
settings.setDisplayZoomControls(false); //隐藏原生的缩放控件
//用WebView组件显示普通网页时一般会出现横向滚动条,这样会导致页面查看起来非常不方便。LayoutAlgorithm是一个枚举,用来控制html的布局,总共有三种类型 没有作用
//settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
settings.setUseWideViewPort(true); //将图片调整到适合webview的大小
settings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
//WebView两种缓存(网页、H5)方式,此处网页不缓存
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
// settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存
// settings.setAllowFileAccess(true); //设置可以访问文件
// settings.setLoadsImagesAutomatically(true); //支持自动加载图片
// settings.setDefaultTextEncodingName("utf-8");//设置编码格式
//支持手势缩放(如webView中需要手动输入用户名、密码等,则webview必须设置支持获取手势焦点)
webView.requestFocusFromTouch();
webView.loadUrl(URL);
展示完成点击签名,开始签名,签名控件是由第三方提供的(据说不便宜啊。。)。返回的是一个bitmap然后显示签名。
private void showImgPreviewDlg(Bitmap img) {
ImageView iv = new ImageView(context);
iv.setBackgroundColor(Color.WHITE);
iv.setImageBitmap(img);
new AlertDialog.Builder(context).setView(iv).show();
}
展示也没什么。我把bitmap保存在sdcard上
//Bitmap bitmap = drawBg4Bitmap(bm);
File file = new File(signatureFile, "signature.png");
boolean exists = file.exists();
if (exists) {
file.delete();
}
try {
file.createNewFile();
} catch (IOException e) {
e.printStackTrace();
}
FileOutputStream fout = null;
try {
fout = new FileOutputStream(file);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
bm.compress(Bitmap.CompressFormat.PNG, 100, fout);
try {
fout.flush();
} catch (IOException e) {
e.printStackTrace();
}
try {
fout.close();
} catch (IOException e) {
e.printStackTrace();
}

这个也没什么,保存完了,我就去看看吧,看看也没什么 ,能正常显示,那就点点看吧,额。。出问题,图片全都是黑的,我的签名明明白纸黑字,但是点击查看的时候却变成全黑色,蒙圈了。 这个bitmap是三方返回给我的,无法查看他是怎么实现的。控件可以完全显示。

google一下 找到问题原因

因为bitmap的背景颜色是透明色,转换成png,默认值变成0,就变成了黑色。

解决: 给bitmap设置背景颜色
Paint paint = new Paint();
paint.setColor(Color.WHITE);
Bitmap.Config config = orginBitmap.getConfig();
Bitmap bitmap = Bitmap.createBitmap(orginBitmap.getWidth(),
orginBitmap.getHeight(), config);
Canvas canvas = new Canvas(bitmap);
canvas.drawRect(0, 0, orginBitmap.getWidth(), orginBitmap.getHeight(), paint);
canvas.drawBitmap(orginBitmap, 0, 0, paint);
return bitmap;
运行,点击查看,问题解决。
问题解决继续写代码。
问题:怎么把签名图片放在我的htlm页面上。
由于技术池比较浅,也不知道哪些方案好,之前做网页爬虫用过jsoup。
jsoup:jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容
InputStream inputStream = context.getResources().openRawResource(R.raw.test);
Document document = Jsoup.parse(inputStream, "UTF-8", "");
Element element = document.getElementById("signature");
 element.append("
");
String html = document.html();

获取到元素,给元素添加img标签。src=相对路径。如果你的html页面和图片在一个文件夹内,像我一样,直接写名字就行。如果在上层目录 ../ 。

html()返回的是一个html字符串。

我是把html字符串保存在手机本地。然后去在加载这个路径。

目前代码就写到这里。真正的html页面还没有给我,听说我好像需要把数据填写到html中。用jsoup也能做,就是太麻烦了,假如有很多字段 我岂不是疯掉了。 看看在说吧!