<!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发过去?
原创文章，作者：bd101bd101，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/245545.html