签名并且上传

2022/4/18 6:12:45

编程Tag： 上传 string function OSS new 签名并且 signName

本文主要是介绍签名并且上传，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>canvasSignature.js实现手写签名</title>
    <link rel="stylesheet" type="text/css" href="css/index.css" />

    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="js/canvasSignature.js"></script>
</head>
<body>
    <div class="container">
        
        <h2>手写签名实现(canvasSignature.js)使用示例</h2>
        <div class="paramItem">
            <strong>以下为手写签名区域</strong>
        </div>
        <canvas id="signName" width="500" height="300">
            您的浏览器当前不支持canvas画布，请更换别的浏览器进行签名操作
        </canvas>
        <button id="clearCanvas">重写</button>
        <button id="createImage">生成图片</button>
        <br/>
        <!-- <div class="paramItem">
            <strong>生成图片如下：</strong>
        </div>
        <img id="newImage" src="" /> -->
        
    </div>

</body>
<script>
$(function(){
    //初始化签名样式（这里仅支持一个签名，如需多个签名框需改写组件）
    $('#signName').canvasSignature({
        fillStyle:'transparent',    //生成图片背景色，默认为透明
        lineWidth:10,    //笔画粗细（尺寸），默认为四像素粗细
        strokeStyle:'red'    //笔画颜色，默认为黑色
    });

    //清除重写
    $('#clearCanvas').on('click',function(){
        //清除重写调用方式
        $('#signName').clearSignature();
    });

    //生成图片
    // $('#createImage').on('click',function(){
    //     //生成图片格式base64包括：jpg、png格式
    //     console.log($('#signName').createSignature('png'));
    //     $('#newImage').attr('src',$('#signName').createSignature('png'));
    // });

    
function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], {type: mimeString});

}
    //上传图片
    $('#createImage').on('click',function(){
        let param = new FormData(); //创建form对象
        let signName = document.getElementById("signName");
        let blob = dataURItoBlob($('#signName').createSignature());
        param.append('file', blob, "--image" + new Date().getTime() + "client_signature.png");
        $.ajax({
                url:"http://localhost:8080/upload/image" , // 请求路径
                type:"POST" , //请求方式
                processData : false,
                contentType : false,
                async:false,
                data:param,
                beforeSend: function (XMLHttpRequest) {
                XMLHttpRequest.setRequestHeader("token", "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhZG1pbiIsImV4cCI6MTY1MDEzODYwOH0.8yRz5hFsDAj84-j0UJYsbczczMHJBBQFUCABUE2pAHA");
             },
                success:function (data) {
                    alert(data);
                },//响应成功后的回调函数
                error:function () {
                    alert("出错啦...")
                },//表示如果请求响应出现错误，会执行的回调函数
                dataType:"text"//设置接受到的响应数据的格式
                    });
                    
    });

});
</script>
</html>

 public static String uploadFile(MultipartFile file) throws IOException {

        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
        String endpoint = "http://oss-cn-beijing.aliyuncs.com";
        String accessKeyId = "LTAI5tRJTRx37u4mYwYJFBir";
        String accessKeySecret = "KRdbluj2AqoEytHfnHs4jOJs1ixm4e";
        String fileName = file.getOriginalFilename();
        String bucketName = "shengqiuyun";
        // 获取文件的后缀名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        // 生成上传文件名
        String finalFileName = System.currentTimeMillis() + "" + new SecureRandom().nextInt(0x0400) + suffixName;
        String objectName = sdf.format(new Date()) + "/" + finalFileName;
        OSS oss = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName, file.getInputStream());

        oss.putObject(putObjectRequest);
        // 设置URL过期时间为1小时。
//        Date expiration = new Date(System.currentTimeMillis() + 3600 * 1000);
        // 生成以GET方法访问的签名URL，访客可以直接通过浏览器访问相关内容。
        String url = "https://" + bucketName + ".oss-cn-beijing.aliyuncs.com/" + objectName;
        oss.shutdown();
        return url;

    }

流式上传_对象存储服务 OBS_Java_上传对象_华为云 (huaweicloud.com)这是华为云obs的教程,我们要不用有dns域名解析,还是我们之后直接用这个公网的ip发过去?

这篇关于签名并且上传的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

签名并且上传

相关编程文章