微信小程序手写签名

微信小程序canvas手写签名

效果图
在这里插入图片描述
在这里插入图片描述

  1. 设置屏幕横屏模式
    在app.json或当前页面xxx.json文件中添加设置屏幕横屏模式
    在这里插入图片描述
    2.wxml
<view class="container">
  <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart"
    bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd"
    binderror="canvasIdErrorCallback"></canvas>
  <view class="tips">
    请在框内签字
  </view>
  <view class='addBtn'>
    <button type="default" class='txt' bindtap="cleardraw">重新签名</button>
    <button type="default" class='txt' bindtap="getimg">提交签字</button>
  </view>
</view>
  1. js
const fileManager = wx.getFileSystemManager();
 
// canvas 全局配置
var context = null; // 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
wx.getSystemInfo({
  success: function (res) {
    canvasw = res.windowHeight * 3.0; //设备宽度
    // canvash = res.windowWidth * 7 / 15;
    canvash = res.windowWidth * 1.2;
  }
});
//注册页面
Page({
 
  /**
 1. 页面的初始数据
   */
  data: {
    signFlag: false,
  },
 
  /**
 2. 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    context = wx.createCanvasContext('canvas');
    context.setFillStyle('#fff')
    context.fillRect(0, 0, canvasw, canvash)
    context.draw(true)
    context.beginPath()
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
  },
  onShow() {
    arrx = [];
    arry = [];
    arrz = [];
  },
 
  isJSON(str) {
    if (typeof str == 'string') {
      try {
        var obj = JSON.parse(str);
        if (typeof obj == 'object' && obj) {
          return true;
        } else {
          return false;
        }
      } catch (e) {
        return false;
      }
    }
  },
 
  canvasIdErrorCallback: function (e) { },
  //开始
  canvasStart: function (event) {
    isButtonDown = true;
    arrz.push(0);
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
    //context.moveTo(event.changedTouches[0].x, event.changedTouches[0].y);
 
  },
  //过程
  canvasMove: function (event) {
    if (isButtonDown) {
      arrz.push(1);
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
      // context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);
      // context.stroke();
      // context.draw()
    };
 
    this.setData({
      signFlag: true,
    })
 
    for (var i = 0; i < arrx.length; i++) {
      if (arrz[i] == 0) {
        context.moveTo(arrx[i], arry[i])
      } else {
        context.lineTo(arrx[i], arry[i])
      };
 
    };
 
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();
    context.draw(true);
  },
  canvasEnd: function (event) {
    isButtonDown = false;
  },
  cleardraw: function () {
    //清除画布
    arrx = [];
    arry = [];
    arrz = [];
    context.clearRect(0, 0, canvasw, canvash);
    context.draw(true);
  },
  //导出图片
  getimg: function () {
    let that = this
    if (arrx.length == 0) {
      wx.showModal({
        title: '提示',
        content: '签名内容不能为空!',
        showCancel: false
      });
      return false;
    };
    console.log(this.data.signFlag);
    if (!this.data.signFlag) {
      wx.showModal({
        title: '提示',
        content: '签名内容不能为空!',
        showCancel: false
      });
      return false;
    }
    //生成图片
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      success: function (res) {
        //将图片转换为base64 的格式
        //let base64 = 'data:image/jpg;base64,' + fileManager.readFileSync(res.tempFilePath,'base64'); 
        //文件图片类型上传
          wx.uploadFile({
          url: app.globalData.apiBaseUrl + app.globalData.uploadUrl,
          filePath: res.tempFilePath,//要上传文件资源的路径(本地路径)
          name:'file',
          header: {
            'X-Access-Token': app.globalData.accessToken
          },
          success: function (res){
            const jsom = JSON.parse(res.data)
             //签名图片 oss地址
            let data = {}
            data.signature = jsom.message
            data.userId = that.data.userId
             api.contractSigning(JSON.stringify(data)).then(res => {
                  if (res.success){
                    util.showErrorToast("签署成功");
                    setTimeout(()=>{
                      wx.navigateTo({
                        url: "/pages/index/index"
                      })

                    },1000)
                  }else {

                  }
             })
          },
          fail:function (err){
            
          }
        })
      }
    })
 
  },
 
})
  1. wxss
page{
  background: #fff;
}
.container {
  width: 95%;
  position: absolute;
  height: 95%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background: #fff;
  border-radius: 5px;
}
.canvas {
  width: 100%;
  height: 70%;
  border: 1px solid #aaa;
  box-sizing: border-box;
}
.tips{
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #aaa;
}
  
.addBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18%;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 100;
}
  
.addBtn .txt {
  text-align: center;
  width: 90%;
  font-size: 13px;
  border-radius: 100px;
  background: #0097fe;
  color: #fff;
  box-sizing: border-box;
  margin: 0 10px;
  padding: 10px;
  z-index: 100;
}

下载Adobe Acrobat DC设置表单 百度有教程

准备一个pdf模板使用Adobe Acrobat DC进行表单填充

在这里插入图片描述
表单填充
在这里插入图片描述
设置表单字段名称跟后台对应
在这里插入图片描述

服务端JAVA部分

添加依赖

 <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.78</version>
        </dependency>
        <dependency>
            <groupId>com.itextpdf</groupId>
            <artifactId>itextpdf</artifactId>
            <version>5.5.11</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.itextpdf/itext-asian -->
        <dependency>
            <groupId>com.itextpdf</groupId>
            <artifactId>itext-asian</artifactId>
            <version>5.2.0</version>
        </dependency>
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.11.2</version>
        </dependency>

配置阿里云OSS
1: 在resources目录下新建aliyunOSS.properties文件
在这里插入图片描述

AccessKey=
AccessKeySecret=
EndPoint=
Buckets=

2:新建PropertiesReader.java 读取配置文件

import java.io.InputStream;
import java.util.Properties;

/**
 * @author : wxl
 * @version : V1.0
 * @description 读取配置文件工具类
 */
public class PropertiesReader {

    //创建Properties对象
    private static Properties property = new Properties();

    //在静态块中加载资源
    static {
        //使用try(){}.. 获取数据源
        //注意 * 这是jdk1.7开始支持的特性,如果使用的是低版本 需要提升jdk版本 或者更改写法
        try (
                InputStream in = PropertiesReader.class.getResourceAsStream("/aliyunOSS.properties");
        ) {
            property.load(in);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 返回Properties对象
     * @return
     */
    public static Properties getProperties(){
        return property;
    }

    /**
     * 获取字符串类型的值
     * @param key
     * @return
     */
    public static String get(String key) {
        return property.getProperty(key);
    }

    /**
     * 获取Integer类型的值
     * @param key
     * @return
     */
    public static Integer getInteger(String key) {
        String value = get(key);
        return null == value ? null : Integer.valueOf(value);
    }

    /**
     * 获取Boolean类型的值
     * @param key
     * @return
     */
    public static Boolean getBoolean(String key) {
        String value = get(key);
        return null == value ? null : Boolean.valueOf(value);
    }

    /**
     * 设置一个键值对
     * @param key
     * @param value
     */
    public static void set(String key,String value){
        property.setProperty(key,value);
    }

    /**
     * 添加一个键值对
     * @param key
     * @param value
     */
    public static void add(String key,Object value){
        property.put(key,value);
    }
}

3:新建AliOSSUtil.java 阿里云OSS文件上传工具类

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.*;

import java.io.*;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import java.util.Properties;
import java.util.UUID;

/**
 * Description:阿里云 OSS 文件上传工具类
 * oranName : 代表用户传过来未经处理的文件名 例如/img/a.jpg
 * objectName : 代表去掉前面/ 加上uuid后的文件名 如img/330ddd7feb6d456f8ee97092d7675c90a.jgp
 * getRealName(objectName) : 指的是存放在OSS中的全路径
 */
public class AliOSSUtil {
    //AccessKey
    private static String accessKeyId = null;
    //AccessKeySecret
    private static String accessKeySecret = null;
    //Endpoint
    private static String endpoint = null;
    //bucketName
    private static String bucketName = null;

    /**
     * 静态块
     */
    static {
        //初始化AccessKey
        accessKeyId = PropertiesReader.get("AccessKey");
        //初始化AccessKeySecret
        accessKeySecret = PropertiesReader.get("AccessKeySecret");
        //初始化Endpoint
        endpoint = PropertiesReader.get("EndPoint");
        //初始化bucketName
        bucketName = PropertiesReader.get("Buckets");
    }

    /**
     * 私有化构造
     */
    private AliOSSUtil() {

    }

    /**
     * 获取图片的URL头信息
     *
     * @return 返回url头信息
     */
    private static String getURLHead() {
        //从哪个位置截取
        int cutPoint = endpoint.lastIndexOf('/') + 1;
        //http头
        String head = endpoint.substring(0, cutPoint);
        //服务器地址信息
        String tail = endpoint.substring(cutPoint);
        //返回结果
        return head + bucketName + "." + tail + "/";
    }

    /**
     * 通过文件URL反向解析文件名
     *
     * @param fileURL 文件URL
     * @return 原文件名
     */
    private static String getObjectName(String fileURL) {
        return fileURL.substring(getURLHead().length());
    }

    /**
     * 批量获取 objectName
     *
     * @param fileURLs url列表
     * @return objectName列表
     */
    private static List<String> getObjectNames(List<String> fileURLs) {
        //创建返回对象
        List<String> result = null;
        //迭代转换
        for (String item : fileURLs) {
            result.add(item.substring(getURLHead().length()));
        }
        return result;
    }

    /**
     * 获取存储在服务器上的地址
     *
     * @param oranName 文件名
     * @return 文件URL
     */
    private static String getRealName(String oranName) {
        return getURLHead() + oranName;
    }

    /**
     * 打印文件的存储地址
     *
     * @param fileURL 文件URL
     */
    private static void printUploadSuccessInfo(String fileURL) {
        //上传成功
        System.out.println("upload success, path = " + getRealName(fileURL));
    }

    /**
     * 打印文件的存储地址
     *
     * @param fileURL 文件URL
     */
    private static void printDeleteSuccessInfo(String fileURL) {
        //上传成功
        System.out.println("delete success, path = " + getRealName(fileURL));
    }


    /**
     * 获取一个随机的文件名
     *
     * @param oranName 初始的文件名
     * @return 返回加uuid后的文件名
     */
    private static String getRandomImageName(String oranName) {
        //获取一个uuid 去掉-
        String uuid = UUID.randomUUID().toString().replace("-", "");
        //查一下是否带路径
        int cutPoint = oranName.lastIndexOf("/") + 1;
        //如果存在路径
        if (cutPoint != 0) {
            //掐头 如果开头是/ 则去掉
            String head = oranName.indexOf("/") == 0 ? oranName.substring(1, cutPoint) : oranName.substring(0, cutPoint);
            //去尾
            String tail = oranName.substring(cutPoint);
            //返回正确的带路径的图片名称
            return head + uuid + tail;
        }
        //不存在 直接返回
        return uuid + oranName;
    }

    /**
     * 创建一个Bucket,这个参数由参数传入 并非配置文件读取
     *
     * @param bucket BucketName 此处参数名喂Bucket是为了不和buckName冲突
     */
    public static String createBucket(String bucket) {

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 创建存储空间。
        ossClient.createBucket(bucket);

        // 关闭OSSClient。
        ossClient.shutdown();

        return bucket;

    }


    /**
     * 根据url获取bucketName
     *
     * @param fileURL 文件的URL
     * @return bucketName
     */
    public static String getBucketName(String fileURL) {
        //前缀
        String prefix = "http://";
        //后缀
        String suffix = ".";
        //截取起始位置
        int beginIndex = fileURL.indexOf(prefix);
        //截取结束位置
        int endIndex = fileURL.indexOf(suffix);
        //如果不是http
        if (beginIndex == -1) {
            prefix = "https://";
            beginIndex = fileURL.indexOf(prefix);
            //如果还是-1 那就是没找到 返回-1即可
            if (beginIndex == -1)
                return null;
        }
        //设置起始位置
        beginIndex = prefix.length();
        //返回bucketName
        return fileURL.substring(beginIndex, endIndex);
    }

    /**
     * 切换bucket
     *
     * @param bucket 新的bucket名称
     */
    public static void useBucketName(String bucket) {
        bucketName = bucket;
        PropertiesReader.set("Buckets", bucket);
    }

    /**
     * 切换bucket
     *
     * @param fileURL 根据URL设置新的BucketName
     */
    public static void useBucketNameByURL(String fileURL) {
        PropertiesReader.set("Buckets", getBucketName(fileURL));
    }

    /**
     * 上传一个文本文件到服务器上
     *
     * @param oranFileName 上传到服务器上的文件路径和名称 文本文件一般以.txt为后缀
     * @param content      上传的内容
     */
    public static String upLoadTextFile(String oranFileName, String content) {

        // <yourObjectName>上传文件到OSS时需要指定包含文件后缀在内的完整路径,例如abc/efg/123.jpg
        String objectName = getRandomImageName(oranFileName);

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 上传内容到指定的存储空间(bucketName)并保存为指定的文件名称(objectName)。
        ossClient.putObject(bucketName, objectName, new ByteArrayInputStream(content.getBytes()));

        //上传成功 打印文件存储地址
        printUploadSuccessInfo(objectName);

        // 关闭OSSClient。
        ossClient.shutdown();

        //返回文件在服务器上的全路径+名称
        return getRealName(objectName);
    }


    /**
     * 上传一个byte数组到服务器上
     *
     * @param oranFileName 上传到服务器上的文件路径和名称
     * @param content      上传的内容
     */
    public static String uploadBytesFile(String oranFileName, byte[] content) {

        // <yourObjectName>上传文件到OSS时需要指定包含文件后缀在内的完整路径,例如abc/efg/123.jpg
        String objectName = getRandomImageName(oranFileName);

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 上传Byte数组。
        ossClient.putObject(bucketName, objectName, new ByteArrayInputStream(content));

        //上传成功 打印文件存储地址
        printUploadSuccessInfo(objectName);

        // 关闭OSSClient。
        ossClient.shutdown();

        //返回文件在服务器上的全路径+名称
        return getRealName(objectName);
    }

    /**
     * 上传网络流
     *
     * @param oranFileName 上传到服务器上的文件路径和名称
     * @param url          网络上文件的url
     */
    public static String uploadNetworkFlows(String oranFileName, String url) {

        // <yourObjectName>上传文件到OSS时需要指定包含文件后缀在内的完整路径,例如abc/efg/123.jpg
        String objectName = getRandomImageName(oranFileName);

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try (
                // 上传网络流。
                InputStream inputStream = new URL(url).openStream();) {

            //上传到OSS
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception e) {
            e.printStackTrace();
        }

        //上传成功 打印文件存储地址
        printUploadSuccessInfo(objectName);

        // 关闭OSSClient。
        ossClient.shutdown();

        //返回文件在服务器上的全路径+名称
        return getRealName(objectName);
    }

    /**
     * 上传文件流
     *
     * @param oranFileName 上传到服务器上的文件路径和名称
     * @param file         来自本地的文件或者文件流
     */
    public static String uploadFileInputSteam(String oranFileName, File file) {

        // <yourObjectName>上传文件到OSS时需要指定包含文件后缀在内的完整路径,例如abc/efg/123.jpg
        String objectName = getRandomImageName(oranFileName);

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 上传文件流。
        try (InputStream inputStream = new FileInputStream(file);) {
            //上传到OSS
            ossClient.putObject(bucketName, objectName, inputStream);
        } catch (Exception ex) {
            ex.printStackTrace();
        }
        //上传成功 打印文件存储地址
        printUploadSuccessInfo(objectName);

        // 关闭OSSClient。
        ossClient.shutdown();

        //返回文件在服务器上的全路径+名称
        return getRealName(objectName);
    }

    /**
     * 上传一个本地文件
     *
     * @param oranFileName  上传到服务器上的名称和路径
     * @param localFileName 需要提供路径和文件名
     */
    public static String uploadLocalFile(String oranFileName, String localFileName) {

        // <yourObjectName>上传文件到OSS时需要指定包含文件后缀在内的完整路径,例如abc/efg/123.jpg
        String objectName = getRandomImageName(oranFileName);

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 创建PutObjectRequest对象。
        PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName, new File(localFileName));

        // 如果需要上传时设置存储类型与访问权限,请参考以下示例代码。
        // ObjectMetadata metadata = new ObjectMetadata();
        // metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS, StorageClass.Standard.toString());
        // metadata.setObjectAcl(CannedAccessControlList.Private);
        // putObjectRequest.setMetadata(metadata);

        // 上传文件。
        ossClient.putObject(putObjectRequest);

        //上传成功 打印文件存储地址
        printUploadSuccessInfo(objectName);

        // 关闭OSSClient。
        ossClient.shutdown();

        //返回文件在服务器上的全路径+名称
        return getRealName(objectName);
    }


    /**
     * 删除指定路径下的一个文件
     *
     * @param fileURL 文件的全称
     */
    public static void deleteFile(String fileURL) {

        // 反向解析文件名
        String objectName = getObjectName(fileURL);

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 删除文件。如需删除文件夹,请将ObjectName设置为对应的文件夹名称。如果文件夹非空,则需要将文件夹下的所有object删除后才能删除该文件夹。
        ossClient.deleteObject(bucketName, objectName);

        //删除成功 打印文件存储地址
        printDeleteSuccessInfo(fileURL);

        // 关闭OSSClient。
        ossClient.shutdown();
    }

    /**
     * 删除指定路径下的多个文件--该方法未测试
     *
     * @param fileURL 要删除的多个文件的集合
     */
    public static void deleteFile(List<String> fileURL) {

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 删除文件。key等同于ObjectName,表示删除OSS文件时需要指定包含文件后缀在内的完整路径,例如abc/efg/123.jpg。
        List<String> keys = new ArrayList<>();
        //批量添加要删除的元素
        for (String item : fileURL) {
            keys.add(getObjectName(item));
        }

        //删除
        DeleteObjectsResult deleteObjectsResult = ossClient.deleteObjects(new DeleteObjectsRequest(bucketName).withKeys(keys));
        List<String> deletedObjects = deleteObjectsResult.getDeletedObjects();

        //批量添加要删除的元素
        for (String item : fileURL) {
            printDeleteSuccessInfo(item);
        }

        // 关闭OSSClient。
        ossClient.shutdown();
    }

    /**
     * 通过文件的URL 判断文件是否存在
     *
     * @param fileURL 文件的URL
     * @return 文件是否存在
     */
    public static boolean exists(String fileURL) {

        // 反向解析文件名
        String objectName = getObjectName(fileURL);

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 判断文件是否存在。doesObjectExist还有一个参数isOnlyInOSS,如果为true则忽略302重定向或镜像;如果为false,则考虑302重定向或镜像。
        boolean found = ossClient.doesObjectExist(bucketName, objectName);

        // 关闭OSSClient。
        ossClient.shutdown();

        //  返回是否存在
        return found;
    }

    /**
     * 从OSS中下载一个文件
     *
     * @param fileURL       文件的url
     * @param localFileName 下载到本地的文件名称
     */
    public static void downloadFileToLoacal(String fileURL, String localFileName) {

        //将url解析成objectName
        String objectName = getObjectName(fileURL);

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // 下载OSS文件到本地文件。如果指定的本地文件存在会覆盖,不存在则新建。
        ossClient.getObject(new GetObjectRequest(bucketName, objectName), new File(localFileName));

        // 关闭OSSClient。
        ossClient.shutdown();

    }


    /**
     * 以流的方式读取一个文件 并打印
     *
     * @param fileURL 文件的url
     */
    public static StringBuffer downloadStream(String fileURL) {
        //<yourObjectName>表示从OSS下载文件时需要指定包含文件后缀在内的完整路径,例如abc/efg/123.jpg。
        String objectName = getObjectName(fileURL);

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // ossObject包含文件所在的存储空间名称、文件名称、文件元信息以及一个输入流。
        OSSObject ossObject = ossClient.getObject(bucketName, objectName);

        // 读取文件内容。
        System.out.println("Object content:");

        StringBuffer sb = new StringBuffer();
        //使用try(){}..关闭资源
        try (BufferedReader reader = new BufferedReader(new InputStreamReader(ossObject.getObjectContent()));) {
            //读取
            while (true) {
                String line = reader.readLine();
                if (line == null) break;
                sb.append(line);
                System.out.println("\n" + line);
            }
        } catch (Exception ex) {
            ex.printStackTrace();
        }

        // 关闭OSSClient。
        ossClient.shutdown();
        //返回读取到的内容
        return sb;
    }

    /**
     * 以流的方式读取一个云端properties文件的key对应的value 并打印
     *
     * @param fileName 文件的url
     */
    public static Object getCloudPropertiesGetValue(String fileName, String key) {

        //properties 文件夹的前缀
        String prefix = "properties/";
        //properties 文件夹的后缀
        String suffix = ".properties";

        //<yourObjectName>表示从OSS下载文件时需要指定包含文件后缀在内的完整路径,例如abc/efg/123.jpg。
        String objectName = prefix + fileName + suffix;

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        // ossObject包含文件所在的存储空间名称、文件名称、文件元信息以及一个输入流。
        OSSObject ossObject = ossClient.getObject(bucketName, objectName);

        // 读取文件内容。
        System.out.println("Object content:");

        //获取一个Properties对象
        Properties properties = PropertiesReader.getProperties();

        try (
                //获取文件流
                InputStream inputStream = ossObject.getObjectContent();) {
            properties.load(inputStream);
        } catch (Exception ex) {
            ex.printStackTrace();
        }

        // 关闭OSSClient。
        ossClient.shutdown();
        //返回读取到的内容
        return properties.get(key);
    }
}

4:测试controller实现PDF填充

import com.alibaba.fastjson.JSONObject;
import com.itextpdf.text.Image;
import com.itextpdf.text.Rectangle;
import com.itextpdf.text.pdf.*;
import com.wxl.agency.oss.AliOSSUtil;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;
import java.time.LocalDate;
import java.util.HashMap;
import java.util.UUID;
/**
 * @author : wxl
 * @version : V1.0
 * @email : 501532090@qq.com
 * @description PDF 文字 图片填充
 */
@RestController
@RequestMapping("/agency")
public class AgencyController {
    /**
     * 签名图片阿里云OSS上传
     * @param file 签名图片
     * @return
     * @throws IOException
     */
    @RequestMapping("/upload")
    public String upload(@RequestBody MultipartFile file) throws IOException {
        String s = AliOSSUtil.uploadBytesFile(UUID.randomUUID().toString()+".jpg", file.getBytes());
        return s != null ? s : "false";
    }
    /**
     * pdf填充保存本地或上传阿里云
     * @param jsonObject {签名图片}
     * @return Result
     */
    @PostMapping("/contractSigning")
    public String contractSigning(@RequestBody JSONObject jsonObject ) throws Exception {
        //签名图片
        String signature = jsonObject.getString("data");
        signature = signature.substring(1,signature.length()-1);
        //用户ID
        //String userId = jsonObject.getString("userId");
        //PDF模板 要填充的PDF
        String templateFilePath = "https://wxlmcl-test.oss-cn-beijing.aliyuncs.com/test33.pdf";
        /**
         * TODO 方式一保存PDF文件地址resources目录下
         * TODO 方式二上传阿里云OSS可设置pdfFilePath为"null"
         */
        String pdfFilePath = System.getProperty("user.dir");
        pdfFilePath = pdfFilePath + "\\src\\main\\resources\\"+ UUID.randomUUID().toString() +".pdf";
        //表单数据

        HashMap<String,String> data = new HashMap<>();
        //LocalDate currentDate = LocalDate.now();
        //String year = String.valueOf(currentDate.getYear());
        //String month = String.valueOf(currentDate.getMonthValue());
        //String day = String.valueOf(currentDate.getDayOfMonth());
        /**
         * TODO 对应Adobe Acrobat DC中表单名称
         */
        data.put("text","测试");
       
        //图片数据
        HashMap<String,String> imageData = new HashMap<>();
        imageData.put("signature",signature);
        // 根据PDF模版生成PDF文件
        String pdfUrl = createPDF(templateFilePath, data, imageData, true, pdfFilePath);
        return pdfUrl;
    }
    /**
     * 获取远程图像的字节数组
     * @param imageUrl 图像的 URL
     * @return 字节数组
     * @throws IOException 如果 URL 不可用或无法连接,则抛出 IOException
     */
    private static byte[] getImageBytesFromUrl(String imageUrl) throws IOException {
        URL url = new URL(imageUrl);
        HttpURLConnection conn = (HttpURLConnection) url.openConnection();
        conn.setRequestMethod("GET");
        InputStream in = conn.getInputStream();
        ByteArrayOutputStream out = new ByteArrayOutputStream();
        byte[] buffer = new byte[1024];
        int length;
        while ((length = in.read(buffer)) != -1) {
            out.write(buffer, 0, length);
        }
        in.close();
        return out.toByteArray();
    }
    /**
     * 根据PDF模版生成PDF文件
     * @param templateFilePath PDF模版文件路径
     * @param data 表单数据
     * @param imageData 图片数据 VALUE为图片文件路径
     * @param formFlattening false:生成后的PDF文件表单域仍然可编辑 true:生成后的PDF文件表单域不可编辑
     * @param pdfFilePath 生成PDF的文件路径
     */
    private static String createPDF(String templateFilePath, HashMap<String,String> data, HashMap<String,String> imageData,
                                    boolean formFlattening, String pdfFilePath) throws Exception{
        PdfReader reader = null;
        ByteArrayOutputStream bos = null;
        PdfStamper pdfStamper = null;
        FileOutputStream fos = null;
        try{
            //读取PDF模版文件网络格式
            URL url = new URL(templateFilePath);
            reader = new PdfReader(url.openStream());
            // 输出流
            bos = new ByteArrayOutputStream();
            // 构建PDF对象
            pdfStamper = new PdfStamper(reader, bos);
            // 获取表单数据
            AcroFields form = pdfStamper.getAcroFields();
            // 使用中文字体 使用 AcroFields填充值的不需要在程序中设置字体,在模板文件中设置字体为中文字体 Adobe 宋体 std L
            BaseFont bfChinese = BaseFont.createFont("STSongStd-Light", "UniGB-UCS2-H", BaseFont.NOT_EMBEDDED);
            form.addSubstitutionFont(bfChinese);
            // 表单赋值
            for(String key : data.keySet()){
                form.setField(key,data.get(key));
                // 也可以指定字体
                form.setFieldProperty(key, "textfont", bfChinese, null);
            }
            //添加图片
            if (null != imageData && imageData.size() > 0) {
                for (String key : imageData.keySet()) {
                    int pageNo = form.getFieldPositions(key).get(0).page;
                    Rectangle signRect = form.getFieldPositions(key).get(0).position;
                    float x = signRect.getLeft();
                    float y = signRect.getBottom();
                    // 从远程 URL 获取图像字节数组
                    byte[] imageBytes = getImageBytesFromUrl(imageData.get(key));
                    // 将字节数组转换为 Image 对象
                    Image image = Image.getInstance(imageBytes);
                    // 获取操作的页面
                    PdfContentByte under = pdfStamper.getOverContent(pageNo);
                    // 根据域的大小缩放图片
                    image.scaleToFit(signRect.getWidth(), signRect.getHeight());
                    // 添加图片
                    image.setAbsolutePosition(x, y);
                    under.addImage(image);
                }
            }
            // 如果为false那么生成的PDF文件还能编辑,一定要设为true
            pdfStamper.setFormFlattening(formFlattening);
            pdfStamper.close();
            //TODO 方式一 保存文件到resources下
            fos = new FileOutputStream(pdfFilePath);
            fos.write(bos.toByteArray());
            fos.flush();
            //删除临时文件
            //AgencyController.delFile(pdfFilePath);
            return null;
            //TODO 方式二 文件上传到阿里云OOS
//            String uu = AliOSSUtil.uploadBytesFile(UUID.randomUUID().toString()+".pdf", bos.toByteArray());
//            return uu;
        }finally {
            if(null != fos){
                try {fos.close(); }catch (Exception e){e.printStackTrace();}
            }

            if(null != bos){
                try {bos.close(); }catch (Exception e){e.printStackTrace();}
            }

            if(null != reader){
                try {reader.close(); }catch (Exception e){e.printStackTrace();}
            }
        }
    }
    /**
     * 删除文件
     * @param filePathAndName 指定路径
     */
    public static Boolean delFile(String filePathAndName) {
        Boolean flag  = false;
        File file = new File(filePathAndName);
        // 检查文件是否存在
        if (file.exists()) {
            // 删除文件
            if (file.delete()) {
                return  flag = true;
            } else {
                return  flag = false;
            }
        } else {
            return  flag = false;
        }
    }
}

demo地址 https://gitee.com/wang_xi_lei/agency-demo.git

  • 5
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
可以使用新版的canvas来实现手写签名功能。下面是一个简单的示例代码: 1. 在wxml文件中添加canvas标签: ```html <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas> ``` 2. 在js文件中获取canvas对象并绑定事件: ```javascript const ctx = wx.createCanvasContext('myCanvas'); // 定义画笔的颜色、粗细等属性 ctx.setStrokeStyle('black') ctx.setLineWidth(3) ctx.setLineCap('round') ctx.setLineJoin('round') let isDrawing = false; let lastX = 0; let lastY = 0; // 触摸事件 wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node; const dpr = wx.getSystemInfoSync().pixelRatio; canvas.width = res[0].width * dpr; canvas.height = res[0].height * dpr; ctx.scale(dpr, dpr); canvas.addEventListener('touchstart', (e) => { isDrawing = true; lastX = e.touches[0].x; lastY = e.touches[0].y; }); canvas.addEventListener('touchmove', (e) => { if (!isDrawing) return; ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(e.touches[0].x, e.touches[0].y); ctx.stroke(); lastX = e.touches[0].x; lastY = e.touches[0].y; }); canvas.addEventListener('touchend', (e) => { isDrawing = false; }); }); ``` 3. 在提交时获取canvas数据: ```javascript wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { // res.tempFilePath 是生成的图片路径 } }); ``` 这样就可以实现一个简单的手写签名功能了。当然,还可以根据需要进行更加复杂的实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值