Android 电子签名，手写签名案列实现方法，并上传网页显示（base64）！

article/2025/7/28 0:17:08

最近说项目可能会用到一个电子签名，不需要识别的那种，只是一个单纯手写签名，然后以base64的格式提供给前端web页面。其实挺简单的，自定义一个手写view就上线了。Android 电子签名，手写签名案列实现方法！
先上图：
这里写图片描述

按钮说明：第一个按钮是清除手写板，第二个是将手写板的内容生成图片并压缩，第三个按钮是触发JS方法，在web页面中显。
布局说明：中间区域是手写屈，左上角是经过大小和质量压缩后的图片，右边是以base64格式上传web页面还原出来的图片。
代码说明：其实很简单，自定义CanvasView继承View
第一步：构造方法里面初始化画布背景、画笔、和路径

 public CanvasView(Context context, AttributeSet attrs) {super(context, attrs);setBackgroundColor(Color.WHITE);paint = new Paint();paint.setColor(Color.BLACK);paint.setStrokeWidth(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, STROKE_WIDTH, getResources().getDisplayMetrics()));paint.setStyle(Paint.Style.STROKE);//设置画笔空心paint.setAntiAlias(true);//消除锯齿path = new Path();}

第二部：画笔归为

   @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawPath(path, paint);}

第三步：处理手势，触发画笔

    @Overridepublic boolean onTouchEvent(MotionEvent event) {float x = event.getX();float y = event.getY();switch (event.getAction()) {case MotionEvent.ACTION_DOWN:path.moveTo(x, y);break;case MotionEvent.ACTION_MOVE:path.lineTo(x, y);break;}invalidate();return true;}

到这里，手写功能就已经能使用了，接下来是做一些处理
1、将view生成图片

    //将view生生图片public Bitmap createBitmap (View v) {int w = v.getWidth();    int h = v.getHeight();//生成图片Bitmap bmp = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);    Canvas c = new Canvas(bmp);     c.drawColor(Color.WHITE); v.layout(0, 0, w, h);    v.draw(c);      return bmp;}

2、图片是否要旋转

    /*** 图片旋转* @param tmpBitmap* @param degrees* @return*/public static Bitmap rotateToDegrees(Bitmap tmpBitmap, float degrees) {Matrix matrix = new Matrix();matrix.reset();matrix.setRotate(degrees);Bitmap rBitmap = Bitmap.createBitmap(tmpBitmap, 0, 0, tmpBitmap.getWidth(), tmpBitmap.getHeight(), matrix,true);return rBitmap;}

3、图片按比例压缩

    /** * 图片按比例大小压缩方法 * * @param image （根据Bitmap图片压缩） * @return */  public static Bitmap compressScale(Bitmap image) {  ByteArrayOutputStream baos = new ByteArrayOutputStream();  image.compress(Bitmap.CompressFormat.JPEG, 100, baos);  // 判断如果图片大于1M,进行压缩避免在生成图片（BitmapFactory.decodeStream）时溢出  if (baos.toByteArray().length / 1024 > 1024) {  baos.reset();// 重置baos即清空baos  image.compress(Bitmap.CompressFormat.JPEG, 80, baos);// 这里压缩50%，把压缩后的数据存放到baos中  }  ByteArrayInputStream isBm = new ByteArrayInputStream(baos.toByteArray());  BitmapFactory.Options newOpts = new BitmapFactory.Options();  // 开始读入图片，此时把options.inJustDecodeBounds 设回true了  newOpts.inJustDecodeBounds = true;  Bitmap bitmap = BitmapFactory.decodeStream(isBm, null, newOpts);  newOpts.inJustDecodeBounds = false;  int w = newOpts.outWidth;//原始宽高 int h = newOpts.outHeight;// 缩放比。由于是固定比例缩放，只用高或者宽其中一个数据进行计算即可  (可根据原始高度计算)int be = 4;// be=1表示不缩放 ，缩放比为1/be ,这里缩小为原来的四分之一newOpts.inSampleSize = be; // 设置缩放比例  // newOpts.inPreferredConfig = Config.RGB_565;//降低图片从ARGB888到RGB565  // 重新读入图片，注意此时已经把options.inJustDecodeBounds 设回false了  isBm = new ByteArrayInputStream(baos.toByteArray());  bitmap = BitmapFactory.decodeStream(isBm, null, newOpts);  return compressImage(bitmap,5);// 压缩好比例大小后再进行质量压缩  //        return bitmap;  }

4、图片按照质量压缩

    /** * 质量压缩方法 * * @param image  size(kb)* @return */  public static Bitmap compressImage(Bitmap image,int size) {  ByteArrayOutputStream baos = new ByteArrayOutputStream();  image.compress(Bitmap.CompressFormat.JPEG, 100, baos);// 质量压缩方法，这里100表示不压缩，把压缩后的数据存放到baos中  int options = 80;  while (baos.toByteArray().length / 1024 > size) { // 循环判断如果压缩后图片是否大于size,大于继续压缩  if(options<10) {options = 10;}baos.reset(); // 重置baos即清空baos  image.compress(Bitmap.CompressFormat.JPEG, options, baos);// 这里压缩options%，把压缩后的数据存放到baos中  options -= 10;// 每次都减少10}  ByteArrayInputStream isBm = new ByteArrayInputStream(baos.toByteArray());// 把压缩后的数据baos存放到ByteArrayInputStream中  Bitmap bitmap = BitmapFactory.decodeStream(isBm, null, null);// 把ByteArrayInputStream数据生成图片  （PS，这一步操作后，图片质量会变大，没有搞懂为什么，知道的大神可以给我解释下549908016@qq.com）return bitmap;  }

5、将图片处理成base64的字符串

 /***   * 图片转化成base64字符串* 创建人：lxj  * 创建时间：2018年3月6日 上午10:14:02   * @version    **/public  String imageToBase64() {//将图片文件转化为字节数组字符串，并对其进行Base64编码处理  String imgFile = Environment.getExternalStorageDirectory()+ "/" + imageName + ".jpg";//待处理的图片  InputStream in = null;  byte[] data = null;  //读取图片字节数组  try   {  in = new FileInputStream(imgFile);          data = new byte[in.available()];  in.read(data);  in.close();  }   catch (IOException e)   {  e.printStackTrace();  }  return Base64.encodeToString(data, Base64.DEFAULT); //返回Base64编码过的字节数组字符串  }  /** * 将Bitmap转换成Base64字符串 * @param bit * @return */  public String Bitmap2StrByBase64(Bitmap bit){  ByteArrayOutputStream bos=new ByteArrayOutputStream();  bit.compress(CompressFormat.JPEG, 100, bos);//参数100表示不压缩  byte[] bytes=bos.toByteArray();  return Base64.encodeToString(bytes, Base64.DEFAULT);  }

demo下载地址，希望对大家有所帮助：http://download.csdn.net/download/u010886975/10271229


http://chatgpt.dhexx.cn/article/POya42Uv.shtml

相关文章

vue中用canvas实现移动端手写板、电子签名功能

vue中用canvas实现移动端手写板、电子签名功能

html部分&#xff1a; js部分&#xff1a; css部分&#xff1a;
阅读更多...
web前端 原生js签名板(电子签名)写字板 canvas 截图

web前端 原生js签名板(电子签名)写字板 canvas 截图

移动端在开发的时候&#xff0c;可能会涉及到手写签名(电子签名)那些&#xff0c;在前端的思路是使用canvas 来签名&#xff0c;导出成图片进行保存。 仅供参考和学习。 vue版本: https://blog.csdn.net/qq_33270001/article/details/102855964 注意:在移动端使用的时候, 写…
阅读更多...
手写板签字php,手写板,签字版

手写板签字php,手写板,签字版

1.建一个view .h文件复制以下代码 /** * 画布 */ interface SKGraphicView : UIView { CGPoint _start; CGPoint _move; CGMutablePathRef _path; NSMutableArray *_pathArray; CGFloat _lineWidth; UIColor *_color; } property (nonatomic,assign)CGFloat lineWidth;/**<…
阅读更多...
前端手写电子签名板实现方案

前端手写电子签名板实现方案

前端手写电子签名板实现 作者&#xff1a; 很菜的小白在分享 时间&#xff1a;2022年12月29日 介绍 什么是电子签名 电子签名是指数据电文中以电子形式所含、所附用于识别签名人身份并表明签名人认可其中内容的数据。—— 百度百科 通俗点说其实就是通过在电子设备上进行类似纸…
阅读更多...
sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端；

sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端；

写在前面 : 在项目的开发过程中可能会涉及到手写签名(电子签名)那些&#xff0c;在前端的思路是使用canvas 来签名&#xff0c;导出成图片进行保存。 此轮子是继 https://blog.csdn.net/qq_33270001/article/details/81809535之后,用于vue项目中,为了方便自己与众人和复用而开…
阅读更多...
无纸化手写电子签名是现今不可或缺的技术

无纸化手写电子签名是现今不可或缺的技术

说到手写电子签名&#xff0c;相信不少人都有所耳闻。在21世纪的今天&#xff0c;移动信息时代&#xff0c;在国家政策指引与倡导下&#xff0c;“无纸化”已成为一种趋势&#xff0c;手写电子签名技术正快速在各行各业推行&#xff0c;不仅节约了纸张资源&#xff0c;助力环境…
阅读更多...
VB.net调用蒙恬Write2Go笔迹手写板进行电子签名

VB.net调用蒙恬Write2Go笔迹手写板进行电子签名

最近的项目需要用到手写电子签名的功能,挑来挑去最后选择了蒙恬Write2Go这款手写板设备,因为手写板上面直接就有一块电子油墨显示屏,所写即所得,还可以看到写的笔迹 安装完蒙恬的驱动及自带应用程序之后,经过测试发现,其工作原理是利用了windows剪切板作为中间桥梁来交换图片数…
阅读更多...
uni-app - 电子签字板组件（签名专用写字画板，支持调整写字板 “横纵“ 方向，可调整线条粗细颜色等，Canvas 绘制非常丝滑流畅）完美兼容 H5 APP 小程序，最好用的画板签字教程插件源码

uni-app - 电子签字板组件（签名专用写字画板，支持调整写字板 “横纵“ 方向，可调整线条粗细颜色等，Canvas 绘制非常丝滑流畅）完美兼容 H5 APP 小程序，最好用的画板签字教程插件源码

前言 网上的教程代码非常乱且都有 BUG 存在，非常难移植到自己的项目中，本文代码干净整洁注释详细。 本文实现了 全端兼容，签名专用的写字板组件，真机流畅丝滑且无 BUG， 您直接复制组件源码，按照详细示例+超详细的注释轻松几分钟完成， 如下图 真机测试，您还可以通过组件…
阅读更多...
H5手写板电子签名开发

H5手写板电子签名开发

如图所示:前端实现H5canvas手写板电子签名:<!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0, maximum-scale1.0, user-scala…
阅读更多...
uniapp - 实现微信小程序电子签名板，横屏手写姓名签名专用写字画板（详细运行示例，一键复制开箱即用）

uniapp - 实现微信小程序电子签名板，横屏手写姓名签名专用写字画板（详细运行示例，一键复制开箱即用）

效果图 实现了在uniapp项目中，微信小程序平台流畅的写字签名板（也可以绘图）功能源码，复制粘贴，改改样式几分钟即可搞定！ 支持自动横屏、持预览，真机运行测试非常流畅不卡顿。 基础模板 如下代码所示。 <template><view class=
阅读更多...
Vue Canvas 实现电子签名 手写板

Vue Canvas 实现电子签名 手写板

直接上代码 <template><section class"signature"><div class"signatureBox"><div class"canvasBox" ref"canvasHW"><canvas ref"canvasF" touchstarttouchStart touchmovetouchMove touchendt…
阅读更多...
锁---一些锁学习

锁---一些锁学习

1、java锁之公平锁和非公平锁 公平锁 是指多个线程按照申请的顺序来获取&#xff0c;类似排队打饭&#xff0c;先来后到。 非公平锁 是指多个线程获取锁的顺序并不是按照申请锁的顺序&#xff0c;有可能后申请的线程比先申请的线程优先获取锁&#xff0c;在高并发的情况下&a…
阅读更多...
C# 实现锁屏

C# 实现锁屏

首先&#xff0c;将窗体的FormBorderStyle设置为none&#xff0c;WindowState设为Maximized 让窗体占据整个页面。 form窗体代码&#xff1a; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using …
阅读更多...
win11中睡眠唤醒后如何禁止锁屏界面及登录界面

win11中睡眠唤醒后如何禁止锁屏界面及登录界面

第一步禁止锁屏界面 gpedit.msc 不显示锁屏-》已启用 第二步&#xff1a;不显示登陆框 netplwiz 经过以上设置以后&#xff0c;打开笔记本就可以直接显示桌面了。
阅读更多...
办公计算机锁屏方法,电脑快速锁屏，办公室神技能，再也不怕别人看我的电脑了！...

办公计算机锁屏方法,电脑快速锁屏，办公室神技能，再也不怕别人看我的电脑了！...

原标题&#xff1a;电脑快速锁屏&#xff0c;办公室神技能&#xff0c;再也不怕别人看我的电脑了&#xff01; 现在快节奏的社会&#xff0c;电脑的更方面性能与功能是非常之大&#xff0c;我们对电脑的使用频率也越来越高&#xff0c;可见它对我们生活越来越重要。在我们平时使…
阅读更多...
Android锁屏的解锁（九个点），使用画的方式，大致的步骤

Android锁屏的解锁（九个点），使用画的方式，大致的步骤

这篇博客是全部代码（没有解释，纯代码）： https://blog.csdn.net/weixin_44614751/article/details/103101104 效果： 第一步：添加背景 第二步：创建九个点 先读取每一个点的图片： creatDot 创建九个点： initNin
阅读更多...
ubuntu 18.04取消自动锁屏功能

ubuntu 18.04取消自动锁屏功能

有时候几分钟不用Ubuntu&#xff0c;系统就自动锁屏了&#xff0c;这是一种安全措施&#xff0c;防止别人趁你不在时使用你的系统。但对于大部分人而言&#xff0c;这是没有必要的&#xff0c;尤其是Ubuntu虚拟机&#xff0c;里面没啥重要的东西&#xff0c;每次锁屏后需要重新…
阅读更多...
Android 通知栏，锁屏播放音乐，类似音乐播放器

Android 通知栏，锁屏播放音乐，类似音乐播放器

项目中需要用到播放音频的功能&#xff0c;想做一个类似酷狗、酷我这样的音频播放功能&#xff0c;在通知栏和锁屏时都可以操控音乐&#xff0c;开发中发现oppo reno手机在锁屏时不显示通知栏&#xff0c;研究了整整一天终于解决&#xff0c;特作记录&#xff0c;给遇到同样问题…
阅读更多...
Android自定义锁屏实现----仿正点闹钟滑屏解锁

Android自定义锁屏实现----仿正点闹钟滑屏解锁

本文原创&#xff0c;转载请注明出处&#xff1a;http://blog.csdn.net/qinjuning 前几周看了下解锁的框架&#xff0c;基本上算是弄了个脸熟。看着别人花哨的解锁界面&#xff0c;心里也很痒痒的。于是&#xff0c;画了一天时间&#xff0c; 捣鼓出了这个成果----仿正点闹钟解…
阅读更多...
易安卓打开Android系统中的解锁方式选择页面(锁屏方式选择)

易安卓打开Android系统中的解锁方式选择页面(锁屏方式选择)

感谢名单 感谢fylfyl2写的https://blog.csdn.net/fyilun/article/details/21257595 E4A打开锁屏方式页面 Intent intent new Intent(); ComponentName cm new ComponentName("com.android.settings","com.android.settings.ChooseLockGeneric"); inte…
阅读更多...
推荐文章

Copyright @ 2022~2023