jSsignature 数字签名，保存图片

最新推荐文章于 2023-11-27 10:10:36 发布
最新推荐文章于 2023-11-27 10:10:36 发布
阅读量547 收藏
点赞数
分类专栏： javaWeb 文章标签： c# java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_21092/article/details/82645793
版权
这篇博客介绍了如何使用Java进行SVG到PNG的转换，并详细讲解了在JavaScript中实现数字签名的过程，同时提供了相关的jsp页面示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

获取页面传递字符 

String data = req.getParameter("data");
String imageData=data.substring(data.indexOf(",")+2, data.length()-2);
			//System.out.println(imageData.indexOf("\\"));
			//String  s="\\";
			//imageData=imageData.replaceAll(s, " ");
			imageData=imageData.replace('\\', ' ');
			imageData=imageData.replaceAll(" \"", "\"");
			//保存特定的目录下面  读取配置文件的路径
			StringBuffer realPathDir = new StringBuffer();
			realPathDir.append(PropertiesUtil.getProperty("SaveFilePath")+Constant.PACT.CAND_SIGNATURE);
			String path = realPathDir.toString();
			String filename=fix+candId+".png";
			String imgPath = SvgPngConverter.convertToPng(imageData,path,path+"/"+filename);



SvgPngConverter.java 

package com.qk365.util;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;

import org.apache.batik.transcoder.TranscoderException;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import org.apache.batik.transcoder.image.PNGTranscoder;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.qk365.join.comp.action.CanditorMobileController;

/**
 * 将svg转换为png格式的图片
 * 
 * 
 */
public abstract class SvgPngConverter {
	private static Logger logger = LoggerFactory.getLogger(SvgPngConverter.class);
    /**
     * 将svg字符串转换为png
     * 
     * @param svgCode svg代码
     * @param pngFilePath 保存的路径
     * @throws TranscoderException svg代码异常
     * @throws IOException io错误
     */
    public static String convertToPng(String svgCode, String filePah,String pngFilePath) throws IOException,
            TranscoderException {

    	File fileFloder = new File(filePah);
    	if(!fileFloder.exists()){
    		fileFloder.mkdir();
    	}

        //File file = new File(pngFilePath);
        FileOutputStream outputStream = null;
        try {
//            file.createNewFile();
            outputStream = new FileOutputStream(pngFilePath);
            convertToPng(svgCode, outputStream);
            return pngFilePath;
        } finally {
            if (outputStream != null) {
                try {
                    outputStream.close();
                } catch (IOException e) {
                  logger.error("outputStream.close e:",e);
                    return null;
                }
            }
        }
    }

    /**
     * 将svgCode转换成png文件，直接输出到流中
     * 
     * @param svgCode svg代码
     * @param outputStream 输出流
     * @throws TranscoderException 异常
     * @throws IOException io异常
     */
    public static void convertToPng(String svgCode, OutputStream outputStream)
            throws TranscoderException, IOException {
        try {
            byte[] bytes = svgCode.getBytes("utf-8");
            PNGTranscoder t = new PNGTranscoder();
            TranscoderInput input = new TranscoderInput(new ByteArrayInputStream(bytes));
            TranscoderOutput output = new TranscoderOutput(outputStream);
            t.transcode(input, output);
            outputStream.flush();
        } finally {
            if (outputStream != null) {
                try {
                    outputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    public static void main(String[] args) {
    	StringBuffer sb=new StringBuffer();
//    	sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"401\" height=\"36\"><path fill=\"none\" stroke=\"#000000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M 1 1 c 2.12 0 80.27 -1.58 121 0 c 20 0.78 38.73 3.98 59 7 c 37.69 5.61 71.69 12.77 109 18 c 16.27 2.28 31.51 2.25 48 4 c 12.78 1.35 24.53 3.99 37 5 c 8.35 0.67 25 0 25 0\"/></svg>");
    	sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"456\" height=\"132\"><path fill=\"none\" stroke=\"#000000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M 2 44 c -0.02 0.19 -1.72 7.99 -1 11 c 0.76 3.17 3.72 7.15 6 10 c 1.53 1.91 3.86 3.53 6 5 c 3.2 2.2 6.51 4.45 10 6 c 5.4 2.4 11.31 3.69 17 6 c 6.92 2.81 13.08 6.44 20 9 c 8.58 3.17 17.02 5.98 26 8 c 27.27 6.12 53.42 11.36 81 16 c 10.73 1.8 21.12 1.57 32 3 c 9.96 1.31 18.94 3.55 29 5 c 21.04 3.04 40.39 7 61 8 c 34.85 1.69 69.52 0.59 104 0 c 4.03 -0.07 7.97 -1.12 12 -2 c 3.77 -0.82 7.42 -1.75 11 -3 c 3.1 -1.08 6.13 -2.39 9 -4 c 5.5 -3.08 11.74 -6.06 16 -10 c 4.2 -3.89 7.74 -9.98 11 -15 c 0.94 -1.45 1.43 -3.29 2 -5 c 0.44 -1.31 1 -2.75 1 -4 c 0 -1.85 -0.12 -4.39 -1 -6 c -2.8 -5.14 -6.49 -11.97 -11 -16 c -10.32 -9.23 -23.9 -16.86 -36 -26 c -4.64 -3.5 -8.36 -7.61 -13 -11 c -7.86 -5.73 -15.83 -11.05 -24 -16 c -2.79 -1.69 -6.3 -2.38 -9 -4 c -2.14 -1.28 -3.91 -3.88 -6 -5 c -1.95 -1.05 -4.59 -1.4 -7 -2 c -1.69 -0.42 -3.44 -1 -5 -1 c -1.56 0 -3.66 0.19 -5 1 c -10.4 6.29 -22.47 14.1 -33 22 c -5.45 4.09 -9.76 10.12 -15 14 l -12 6\"/></svg>");
    	String m="<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"456\" height=\"132\"><path fill=\"none\" stroke=\"#000000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M 2 44 c -0.02 0.19 -1.72 7.99 -1 11 c 0.76 3.17 3.72 7.15 6 10 c 1.53 1.91 3.86 3.53 6 5 c 3.2 2.2 6.51 4.45 10 6 c 5.4 2.4 11.31 3.69 17 6 c 6.92 2.81 13.08 6.44 20 9 c 8.58 3.17 17.02 5.98 26 8 c 27.27 6.12 53.42 11.36 81 16 c 10.73 1.8 21.12 1.57 32 3 c 9.96 1.31 18.94 3.55 29 5 c 21.04 3.04 40.39 7 61 8 c 34.85 1.69 69.52 0.59 104 0 c 4.03 -0.07 7.97 -1.12 12 -2 c 3.77 -0.82 7.42 -1.75 11 -3 c 3.1 -1.08 6.13 -2.39 9 -4 c 5.5 -3.08 11.74 -6.06 16 -10 c 4.2 -3.89 7.74 -9.98 11 -15 c 0.94 -1.45 1.43 -3.29 2 -5 c 0.44 -1.31 1 -2.75 1 -4 c 0 -1.85 -0.12 -4.39 -1 -6 c -2.8 -5.14 -6.49 -11.97 -11 -16 c -10.32 -9.23 -23.9 -16.86 -36 -26 c -4.64 -3.5 -8.36 -7.61 -13 -11 c -7.86 -5.73 -15.83 -11.05 -24 -16 c -2.79 -1.69 -6.3 -2.38 -9 -4 c -2.14 -1.28 -3.91 -3.88 -6 -5 c -1.95 -1.05 -4.59 -1.4 -7 -2 c -1.69 -0.42 -3.44 -1 -5 -1 c -1.56 0 -3.66 0.19 -5 1 c -10.4 6.29 -22.47 14.1 -33 22 c -5.45 4.09 -9.76 10.12 -15 14 l -12 6\"/></svg>";
    	//<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="456" height="132"><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 2 44 c -0.02 0.19 -1.72 7.99 -1 11 c 0.76 3.17 3.72 7.15 6 10 c 1.53 1.91 3.86 3.53 6 5 c 3.2 2.2 6.51 4.45 10 6 c 5.4 2.4 11.31 3.69 17 6 c 6.92 2.81 13.08 6.44 20 9 c 8.58 3.17 17.02 5.98 26 8 c 27.27 6.12 53.42 11.36 81 16 c 10.73 1.8 21.12 1.57 32 3 c 9.96 1.31 18.94 3.55 29 5 c 21.04 3.04 40.39 7 61 8 c 34.85 1.69 69.52 0.59 104 0 c 4.03 -0.07 7.97 -1.12 12 -2 c 3.77 -0.82 7.42 -1.75 11 -3 c 3.1 -1.08 6.13 -2.39 9 -4 c 5.5 -3.08 11.74 -6.06 16 -10 c 4.2 -3.89 7.74 -9.98 11 -15 c 0.94 -1.45 1.43 -3.29 2 -5 c 0.44 -1.31 1 -2.75 1 -4 c 0 -1.85 -0.12 -4.39 -1 -6 c -2.8 -5.14 -6.49 -11.97 -11 -16 c -10.32 -9.23 -23.9 -16.86 -36 -26 c -4.64 -3.5 -8.36 -7.61 -13 -11 c -7.86 -5.73 -15.83 -11.05 -24 -16 c -2.79 -1.69 -6.3 -2.38 -9 -4 c -2.14 -1.28 -3.91 -3.88 -6 -5 c -1.95 -1.05 -4.59 -1.4 -7 -2 c -1.69 -0.42 -3.44 -1 -5 -1 c -1.56 0 -3.66 0.19 -5 1 c -10.4 6.29 -22.47 14.1 -33 22 c -5.45 4.09 -9.76 10.12 -15 14 l -12 6"/></svg>
    	//<?xml version= "1.0 " encoding= "UTF-8 " standalone= "no "?><!DOCTYPE svg PUBLIC  "-//W3C//DTD SVG 1.1//EN "  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd "><svg xmlns= "http://www.w3.org/2000/svg " version= "1.1 " width= "452 " height= "68 "><path fill= "none " stroke= "#000000 " stroke-width= "2 " stroke-linecap= "round " stroke-linejoin= "round " d= "M 1 1 c 0.39 0.3 14.23 11.67 22 17 c 10.55 7.23 20.85 14.18 32 20 c 11.91 6.21 24.32 10.98 37 16 c 5.27 2.09 10.45 3.52 16 5 c 9.88 2.63 19.3 5.35 29 7 c 5.86 1 11.8 0.92 18 1 c 20.97 0.27 40.16 0.47 61 0 c 9.25 -0.21 17.89 -0.86 27 -2 c 9.91 -1.24 19.3 -2.79 29 -5 c 9.6 -2.19 18.99 -4.56 28 -8 c 9.27 -3.54 17.58 -8.96 27 -13 c 14.53 -6.23 32.65 -16.83 43 -17 c 5.23 -0.09 11.29 11.28 17 16 c 1.64 1.36 3.98 2.27 6 3 c 1.54 0.56 3.33 0.93 5 1 c 6.55 0.26 13.96 1.31 20 0 c 8.41 -1.83 17.84 -6.29 26 -10 l 7 -5 "/></svg>
    	/*try {
			convertToPng(sb.toString(), "e:/hr.png");
		} catch (Exception e) {
			e.printStackTrace();
		}*/
   	String s="=\\\"=";
   	System.out.println(s.indexOf("/"));
   	s=s.replaceAll("\\", "*");
    	System.out.println(s);
	}
}



jsp页面demo见附件
jSignature 插件实现手写电子签名
需要点灵感
09-10 1639
需求：需要在合同的最后加一个签名区，让用户能用鼠标或手指进行签名。 解决方案：jSignature 插件，依赖jquery。 index.html //#canvasDiv 就是书写区域，img 是书写完成后转为图片 <div class="person" style=""> 乙方(持卡人及卡片使用人签字)：</br> <div id="canvasDiv"></div> <button id="
电子签名并加水印处理
weixin_43561580的博客
08-22 2943
一、电子签名 1、代码主要功能 生成如下的签名页面。 所加水印处理的效果图 3、电子签名使用 电子签名需要导入jsignature, jSignature是一个jQuery插件，它简化了创建签名捕获场的浏览器窗口，允许用户使用鼠标，笔，或手指画一个签名。jSignature捕捉签名矢量轮廓的笔触。虽然jSignature可以导出大位图（PNG）也一样，提取签名的高度可扩展的行程运...
jSignature签字板保存为图片
sun_96216的专栏
03-19 3782
今天要讲的是使用jquery插件jSignature做一个手写板签字的功能，并将签字笔迹保存为图片。第一步：环境准备　　jquery、jSignature第二步：demo编写　　123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960...
使用jSignature生成手写数字签名并保存为图片
知北行的博客
10-10 4754
1.调用jSignature插件生成手写数字签名 头部记得先引用jquery，再引用jSignature的js文件，html网页源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>signature_demo</...
php 用 jSignature手写签名保存图片到本地
Joker丶婉婷的博客
06-06 5045
要是不想看直接想拿过来用的话请转https://download.youkuaiyun.com/download/qq_34285103/10460024首先  去官网http://willowsystems.github.io/jSignature/#/about/jSignature下载jSignature然后在相对页面写上引入下载得js和写上html，在下方script  实例化插件最后获取到base6...
jsignature生成图片上传至java后台保存为png图片格式
lqx_sunhan的博客
12-13 3997
前端 该插件使用方法很简单，直接引用一下官方到demo了， https://willowsystems.github.io/jSignature/#/about/ 代码如下: var $sigdiv = $("#signature") $sigdiv.jSignature() // 使用dom容器初始化 $sigdiv.jSignature("reset") // 这是重置签名的方法...
jSsignature实现图片数字签名的工具应用
接下来，我会详细解释这些概念，重点分析数字签名在保存图片中的应用，并对相关源码和工具进行讨论。 **数字签名（jSsignature）** 数字签名是一种用于验证数字信息完整性和来源真实性的一种技术，它使用了非对称...
jSignature 签名Demo
01-29
签名完成后，可以使用提供的按钮将签名保存为Base64字符串，或者清除当前的签名。 在实际应用中，开发者可能会进一步扩展这个Demo，例如添加保存签名的功能，将Base64数据发送到服务器，或者将签名数据与表单中的...
jSignature网页手写签名
热门推荐
我的博客
07-02 1万+
一、效果图 　　注意：1、CSS样式自己调，这里写的很简陋。 　　　　　2、单击下载，并不是下载图片，而是保存到后台。 二、前端 &amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;zh-CN&amp;amp;amp;amp;quot;&amp;am
js-signer:仅使用javascript进行数字签名内容
05-13
js签名者 工作选项， 重要更新：此代码将不再可靠地工作。 如果您不需要智能卡支持，请使用实验性的网络加密API。 如果需要智能卡支持，则需要一个额外的插件，例如插件 仅使用javascript对内容进行数字签名。 支持智能卡。 自签名证书可能有效也可能无效。 支持的浏览器：Internet Explorer（CAPICOM），Firefox（window.crypto） 只要W3C定义了 Chrome和Safari就会实现这一点。 您可以阅读此。
C#开发的电子签名程序可保存到指定位置jpg图片
06-27
电子签名保存显示案例是一款基于C#开发的电子签名程序，主要实现了签名的显示与保存，适合初学者使用，可将完成的签名保存到指定位置，可修改对应的画笔宽度、颜色、透明度等。注意事项：1、开发环境为VisualStudio2012,使用.net4.5开发。
jSignature电子签名(没有二进制图片保存内容）
12-14
jSignature基于HTML上进行电子签名(没有二进制图片保存内容），生成的签名图片为二进制图片信息提供保存
html5 利用canvas手写签名并保存的实现方法
09-22
主要介绍了html5 利用canvas手写签名并保存的实现方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
网上数字签名系统的实现
03-13
随着Internet的飞速发展，网上业务申请变得越来越普及，经常会出现双方在不见面的情况下，通过申请文件的提交，达到业务申请的目的。由于Internet网络的一些不安全因素，提交的申请文件可能在网上传输的过程中，被劫取、篡改、伪造或发生发送方抵赖等问题。那么如何保证申请文件的真实性、在网络传输中的完整性及申请人的不可抵赖性就成了安全地完成网络业务申请的关键。 签名是证明当事者的身份和数据真实性的一种信息，可以用不同的形式来表示。一种完善的签名应满足以下三个条件：签名者事后不能抵赖自己的签名；任何其他人不能伪造签名；如果当事人双方关于签名的真伪发生争执，能够在公正的仲裁者面前通过验证来确认其真伪。 在传统的书面文件为基础的事务处理中，手签、印章、手印等书面签名基本上满足以上条件，因而得到司法部门的支持，具有一定的法律意义。 在以计算机文件为基础的现代事务处理中，采用电子形式的签名。目前的数字签名是建立在公开密钥体制基础上，它是公开密钥加密技术的另一类应用。它的主要方式是：报文的发送方从报文文本中生成一个128位的散列值（或报文摘要）；发送方用自己的私人密钥对这个散列值进行加密来形成发送方的数字签名。然后，这个数字签名将作为报文的附件和报文一起发送给报文的接收方；报文的接收方首先从接收到的原始报文中计算出128位的散列值（或报文摘要），接着再用发送方的公用密钥来对报文附加的数字签名进行解密。如果两个散列值相同、那么接收方就能确认该数字签名是发送方的。 通过数字签名能够实现对原始报文的鉴别，我国1995年制定了自己的数字签名标准（GB15851-1995），使其具有法律意义，由于数字签名利用密钥技术进行，因而可以获得比书面签名更高的安全性。 公开密钥加密技术的体制是，申请人具有一对密钥，一个是私钥，自行保存，用于文件的数字签名；一个是公钥，公开发布，用于接收方验证签名。由于私钥只有申请人自己持有，而且只有用申请人的私钥加密的文件，才能用申请人的公钥进行解密验证，所以在保障信息安全的同时，保障了申请人的不可抵赖性。 本文的数字签名方式采用的是公开密钥算法DSA和报文摘要算法SHA-1的融合
用JS的canvas实现数字签名
qq_51660806的博客
07-18 292
用JS的canvas实现数字签名
javascript+canvas实现数字签名功能
最新发布
Binlins的博客
11-27 501
javascript+canvas实现数字签名功能
HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能
weixin_42231795的博客
04-14 4215
公司需求html5手写签名，并转换成图片上传服务器项目结构：jquery+springboot项目需要引入js文件：jquery的jquery.min.js 、jSignature插件的 jSignature.min.js 、flashcanvas.js文件 小白注意：引入js的方式我是通过thymeleaf，不是该模板的请通过绝对路径或者相对路径等其他方式引入，其中ajax中的url路径已置空...
JS实现网页签名(生成任意格式png、JPG等)
06-10
实现电子签名用到的文件，mui.min.css mui.min.js jquery.min.js jSignature.min.js css/drawing/flashcanvas.js
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值