【橙子】JqueryJs--青年大学习截图上传统计工具-CSDN博客

本文链接：https://blog.csdn.net/QAQQVQQTQ/article/details/107672745
作者的话
这个已经投入实战了！！
一个真正有意义的项目哦！
自动打水印，一键上传，包括班级上传统计在这里插入代码片
源代码
@{
    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>