html代码
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Signature Pad demo</title>
<meta name="description" content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation.">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/signature-pad.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie9.css">
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-39365077-1']);
_gaq.push(['_trackPageview']);
(function () {
//var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
//ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
//var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body onselectstart="return false">
<div id="signature-pad" class="signature-pad">
<div>
<!--<button type="button" class="button iframeBtn" data-action="change-color">切换颜色</button>-->
</div>
<div class="signature-pad--body">
<canvas></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">请在上面签名</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button iframeBtn" data-action="clear">清除</button>
<button type="button" class="button iframeBtn" data-action="undo">撤销</button>
</div>
<div>
<!--<button type="button" class="button iframeBtn" data-action="save-png">Save as PNG</button>-->
<button type="button" class="button iframeBtn" data-action="save-jpg" style="background-color: #1890ff; border-color: #1890ff;">保存</button>
<!--<button type="button" class="button iframeBtn" data-action="save-svg">Save as SVG</button>-->
<button type="button" class="button iframeBtn" style="background-color: #f5222d;border-color: #f5222d;">取消</button>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/signature_pad.umd.js"></script>
<script src="js/app.js"></script>
</body>
</html>
前端代码
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
var wrapper = document.getElementById("signature-pad");
var clearButton = wrapper.querySelector("[data-action=clear]");
var changeColorButton = wrapper.querySelector("[data-action=change-color]");
var undoButton = wrapper.querySelector("[data-action=undo]");
var savePNGButton = wrapper.querySelector("[data-action=save-png]");
var saveJPGButton = wrapper.querySelector("[data-action=save-jpg]");
var saveSVGButton = wrapper.querySelector("[data-action=save-svg]");
var canvas = wrapper.querySelector("canvas");
var signaturePad = new SignaturePad(canvas, {
// It's Necessary to use an opaque color when saving image as JPEG;
// this option can be omitted if only saving as PNG or SVG
backgroundColor: 'rgb(255, 255, 255)'
});
// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
// When zoomed out to less than 100%, for some very strange reason,
// some browsers report devicePixelRatio as less than 1
// and only part of the canvas is cleared then.
var ratio = Math.max(window.devicePixelRatio || 1, 1);
// This part causes the canvas to be cleared
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
// This library does not listen for canvas changes, so after the canvas is automatically
// cleared by the browser, SignaturePad#isEmpty might still return false, even though the
// canvas looks empty, because the internal data of this library wasn't cleared. To make sure
// that the state of this library is consistent with visual state of the canvas, you
// have to clear it manually.
signaturePad.clear();
}
// On mobile devices it might make more sense to listen to orientation change,
// rather than window resize events.
window.onresize = resizeCanvas;
resizeCanvas();
function download(dataURL, filename) {
if (navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") === -1) {
window.open(dataURL);
} else {
//上传到服务器
var arr = dataURL.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
var obj = new Blob([u8arr], { type: mime });
var fd = new FormData();
fd.append("file", obj, "image.png");
$.ajax({
type: 'post',
url: 'http://localhost:8001/Base32Sys/YearExperimentPlan/Control/PadJk.ashx?Action=UpLoadFile',
processData: false,
contentType: false,
data: fd,
crossDomain: true,
success: function (data) {
alert(data);
},
error: function (error) {
alert(error);
}
})
}
}
// One could simply use Canvas#toBlob method instead, but it's just to show
// that it can be done using result of SignaturePad#toDataURL.
function dataURLToBlob(dataURL) {
// Code taken from https://github.com/ebidel/filer.js
var parts = dataURL.split(';base64,');
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
clearButton.addEventListener("click", function (event) {
signaturePad.clear();
});
undoButton.addEventListener("click", function (event) {
var data = signaturePad.toData();
if (data) {
data.pop(); // remove the last dot or line
signaturePad.fromData(data);
}
});
//changeColorButton.addEventListener("click", function (event) {
// var r = Math.round(Math.random() * 255);
// var g = Math.round(Math.random() * 255);
// var b = Math.round(Math.random() * 255);
// var color = "rgb(" + r + "," + g + "," + b +")";
// signaturePad.penColor = color;
//});
//savePNGButton.addEventListener("click", function (event) {
// if (signaturePad.isEmpty()) {
// alert("Please provide a signature first.");
// } else {
// var dataURL = signaturePad.toDataURL();
// download(dataURL, "signature.png");
// }
//});
saveJPGButton.addEventListener("click", function (event) {
if (signaturePad.isEmpty()) {
alert("Please provide a signature first.");
} else {
var dataURL = signaturePad.toDataURL("image/jpeg");
download(dataURL, "signature.jpg");
}
});
//saveSVGButton.addEventListener("click", function (event) {
// if (signaturePad.isEmpty()) {
// alert("Please provide a signature first.");
// } else {
// var dataURL = signaturePad.toDataURL('image/svg+xml');
// download(dataURL, "signature.svg");
// }
//});
后端代码
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
private string UpLoadFile(HttpContext context)
{
try
{
//接收post file 文件
HttpPostedFile file = context.Request.Files["file"];
//文件类型
string fileType = System.IO.Path.GetExtension(file.FileName);
//保存文件路径
string filePathName = HttpContext.Current.Server.MapPath("..") + "\\File\\";
//文件名称
string fileName = file.FileName;
//文件重新命名
string fileNameNew = System.DateTime.Now.ToString("yyMMddHHmmss") + "_" + fileName;
//保存file
if (!System.IO.Directory.Exists(filePathName))
{
System.IO.Directory.CreateDirectory(filePathName);
}
file.SaveAs(System.IO.Path.Combine(filePathName, fileNameNew));
return JsonConvert.SerializeObject(new PM_AnnexInfo()
{
ID = Guid.NewGuid().ToString(),
FILEURL = filePathName + fileNameNew
});
}
catch (Exception ex)
{
return string.Format("error:{0}",ex);
}
}
708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
