对于手写签名生成图片储存和回显的实现

首先感谢网络上分享的文章：http://www.benhailong.com/index.php

js+css的demo下载地址：点击这里

把下载的文件引入到自己的项目中，对应修改js和css的路径。打开 app.js ,找到下面的代码，我这边以生成 png 格式为例

savePNGButton.addEventListener("click", function (event) {if (signaturePad.isEmpty()) {alert("请先提供签名。");} else {window.open(signaturePad.toDataURL());}
});

用下面的代码，替换掉上面代码中的 window.open(signaturePad.toDataURL()); 修改对应的url

//调用方法 如
post('/ProjectAdmin/tojson.do', {'lines' :signaturePad.toDataURL()});

并在文件末尾添加以下代码

function post(URL, PARAMS) {var temp = document.createElement("form");temp.action = URL;temp.method = "post";temp.style.display = "none";for (var x in PARAMS) {var opt = document.createElement("textarea");opt.name = x;opt.value = PARAMS[x];// alert(opt.name)temp.appendChild(opt);}

之后我们就可以去后端写接受的方法：（这里用的是Base64格式）
我这里应用的是play框架，亲们可以根据自己的实际环境自行更改。

如果仅作回显就可以直接把接受过来的string直接返回就好：

    public static void show(String lines) {render(lines);}

如果需要把图片储存，对Base64进行解码。生成jpeg图片。

这里应用的是play framework 1.2.7

    public static void show(String lines) {boolean b =new Application(). GenerateImage(lines, "D:\\aaaa.jpg");if (b) {System.out.println("图片存储成功");}else {System.out.println("图片存储失败");}render(lines);}

因为我接收的string格式是：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApIAAAEqCAYAAACm+bDjAAAgAElEQVR4Xu3dT6g2V54X8N/gvwbFdECGQdHu4NKBdEBlECGdhSK0kMSNjpt0XLhNeusmyUKG…

所以要对字符串进行下处理。转换方法如下：


public boolean GenerateImage(String imgStr, String imgFilePath) {// 对字节数组字符串进行Base64解码并生成图片if (imgStr == null) // 图像数据为空return false;Decoder decoder = Base64.getDecoder();try {//对字符串进行处理int j = imgStr.indexOf(',');if (j!=-1) {imgStr=imgStr.substring(j+1);}// Base64解码byte[] bytes = decoder.decode(imgStr);for (int i = 0; i < bytes.length; ++i) {if (bytes[i] < 0) {// 调整异常数据bytes[i] += 256;}}// 生成jpeg图片File file = new File(imgFilePath);if (!file.exists()) {file.createNewFile();}OutputStream out = new FileOutputStream(file);out.write(bytes);out.flush();out.close();return true;} catch (Exception e) {e.printStackTrace();return false;}}

好了大功告成去看看你的D盘是不是有一张图片。这个demo 完成了基本实现，具体根据各位大大的环境自行调试就好。

手写界面

回显

生成的本地图片

如果觉得帮助到了各位大大请给小弟赞一下鼓励鼓励！

对于手写签名生成图片储存和回显的实现相关推荐

HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能
公司需求html5手写签名,并转换成图片上传服务器项目结构:jquery+springboot项目需要引入js文件:jquery的jquery.min.js .jSignature插件的 jSign ...
iOS手写签名生成图片贝赛尔曲线
最近公司业务有一个需求,用户认证时需要手动签名,客户端需要将用户的签名生成图片上传给服务器.于是利用贝赛尔曲线研究了一下手动签名,和大家分享一下. Demo下载地址:https://github.co ...
HTML5+jSignature插件手写签名生成图片并转换成文件流实现服务器上传功能
简介项目结构:html+vue+springboot html引入VUE项目vue.min.js.jQuery的jquery-3.4.1.min.js,签名:modernizr.js.jSignat ...
Android通过webview实现手写签名生成图片并上传服务器
MainActivity 签名页面 package com.sign.webview;import android.app.Activity; import android.content.Inten ...
微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
一.简介在微信小程序开发中,有时候需要手写签名生成图片上传服务器.制作一个手绘板.画板并支持保存图片等,然后就封装了一下:DZMDrawingBoard. DZMDrawingBoard 通过 Ca ...
Android 电子签名，手写签名案列实现方法，并上传网页显示（base64）！
最近说项目可能会用到一个电子签名,不需要识别的那种,只是一个单纯手写签名,然后以base64的格式提供给前端web页面.其实挺简单的,自定义一个手写view就上线了.Android 电子签名,手写签名 ...
在app端手写签名并保存下来（以文件形式或者是base64编码）
最近做的项目有个需求,在app端手写签名的并保存为文件或者base64编码.所以就刚好有时间写了一下并记录下来: 先上效果图: 分析思路:因为这里是要获取手势轨迹并画出来,所以肯定是有个Touch事件 ...
ai中如何插入签名_技巧不求人167期 Excel如何打印到1页纸的2种方法 Excel如何插入手写签名...
嗨,大家好,上期我们介绍了Excel如何制作漂亮的文件盒侧标签.今天我们继续分享,在日常excel编辑过程中,常常会遇到因为数列或者行数过多导致内容不全,根本就不能打印在一张纸上面,假如分开打印到两张 ...
word手写字体以假乱真_轻松制作个人“电子版手写签名”
当微信不再单纯作为一个社交软件而升级成生产力工具,当手机中WPS.Office应用使用频率越来越高,相信大家都会需要一个电子版签名来应对工作中的"隔空文件".尤其是特殊的2020年 ...

对于手写签名生成图片储存和回显的实现

对于手写签名生成图片储存和回显的实现相关推荐

最新文章

热门文章