作者的话
这个已经投入实战了!!
一个真正有意义的项目哦!
自动打水印,一键上传,包括班级上传统计在这里插入代码片
效果展示
已上传服务器
源代码
@{
ViewBag.Title = "Home Page";
}
@using StudentSys.Models
@{
jiftEntities ji = new jiftEntities();
var stu = from u in ji.student
select new
{
u.name,
u.num,
u.time,
u.sub
};
}
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<head>
<style>
#textul li {
height: 50px;
border: solid 1px #ced4da;
list-style-type: none;
color: #007bff;
line-height: 50px;
position: relative;
border-bottom: none;
}
</style>
</head>
<div class="container bg-light mt-1 shadow-sm">
<div class="row">
<ul id="textul" class="my-5 col-3">
@{
foreach (var k in stu)
{
string t = "[已提交]";
if (k.sub == 0)
{
t = "[未提交]";
}
<li class="text-center shadow-sm">@t@k.num@k.name@k.time</li>
}
}
</ul>
<form method="post" action="" enctype="multipart/form-data">
<div class="col-9">
<div class="my-5 mx-auto w-75">
<div class="input-group flex-nowrap">
<div class="input-group-prepend">
<span class="input-group-text" id="addon-wrapping">姓名:</span>
</div>
<input id="name" type="text" class="form-control" placeholder="请输入你的姓名" aria-label="请输入你的姓名" aria-describedby="addon-wrapping">
</div>
</div>
<div class="text-center">
<p id="imgUploadX" class="m-auto"></p>
</div>
<div class="my-5 text-center mt-1">
<input type="file" id="uploadFile" class="clip row m-auto invisible" accept="image/*">
<div class="row">
<div class="col-6">
<label for="uploadFile" class="btn btn-outline-primary m-auto col-6">选择图片</label>
</div>
<div class="col-6">
<button type="button" class="btn btn-outline-primary m-auto col-6">提交截图</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
var eleUploadFile = document.getElementById('uploadFile');
var eleImgUploadX = document.getElementById('imgUploadX');
if (history.pushState) {
eleUploadFile.addEventListener('change', function (event) {
var reader = new FileReader();
var file = event.target.files[0] || event.dataTransfer.files[0];
reader.onload = function (e) {
var base64 = e.target.result;
if (base64.length > 1024 * 10000) {
alert('图片尺寸请小于10000K');
return;
} else {
// 使用canvas合成图片,并base64化
imgTogether(base64, function (url) {
// 尺寸
var size =500 / (window.devicePixelRatio || 1);
// 预览
eleImgUploadX.innerHTML = '<img class="mx-auto" src="' + url + '" width="' + size + '" height="' + size + '">';
});
}
};
reader.readAsDataURL(file);
});
// canvas图片合成
var imgTogether = function (url, callback) {
var canvas = document.createElement('canvas');
var size = 500;
canvas.width = size;
canvas.height = size;
var context = canvas.getContext('2d');
// 这是上传图像
var imgUpload = new Image();
imgUpload.setAttribute("crossOrigin", 'Anonymous');
imgUpload.onload = function () {
// 绘制
context.drawImage(imgUpload, 0, 0, size, size, 0, 0, size, size);
// 再次绘制
var imgname = document.getElementById('name').value;
context.font = "50px Verdana";
context.fillText(imgname, 10, 50, 250);
// 回调
callback(canvas.toDataURL('image/png'));
};
imgUpload.src = url;
};
} else if (eleImgUploadX) {
eleImgUploadX.className = 'remind';
eleImgUploadX.innerHTML = '本演示IE10+下才有效果';
}
</script>