123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- <html>
- <head>
- <meta charset="UTF-8">
- <title>作业批改 - 旧版</title>
- <link rel="stylesheet" href="css/index.css">
- <link rel="stylesheet" href="http://cdn.staticfile.org/semantic-ui/2.3.1/semantic.css">
- </head>
- <body style="background-color: #E5E4E5;overflow-x: hidden;">
- <div style="margin-top:10px;">
- <div style="width:50px;float:left;">
- <ul id="toolsul" class="tools">
- <li data-type="right" class="active" title="整题正确">
- <i class="icon-right-select" data-default='icon-right-black'></i>
- </li>
- <li data-type="wrong" title="整题错误">
- <i class="icon-wrong-black" data-default='icon-wrong-black'></i>
- </li>
- <li data-type="smallright" title="题目内单个正确">
- <i class="icon-right-small-black" data-default='icon-right-small-black'></i>
- </li>
- <li data-type="smallwrong" title="题目内单个错误">
- <i class="icon-wrong-small-black" data-default='icon-wrong-small-black'></i>
- </li>
- <li data-type="rectangle" title="错题圈定">
- <i class="icon-tools icon-square-black" data-default="icon-tools icon-square-black"></i>
- </li>
- <li data-type="remove" title="橡皮擦">
- <i class="icon-tools icon-remove-black" data-default='icon-tools icon-remove-black'></i>
- </li>
- <li onclick="cutFun()" title="成绩查看">
- <i class="icon-submit-black" data-default='icon-submit-black'></i>
- </li>
- </ul>
- </div>
- <div id="canvasDiv" class="canvasDiv" style="width:auto;height: auto;">
- <canvas id="c" height="890">请使用支持HTML5的浏览器</canvas>
- </div>
- <div style="color:red;margin-top: 10px;margin-left: 60px;">注意:错题必须使用工具栏“错题圈定”圈定错题。</div>
- <div id="wrongImg"></div>
- </div>
- <script src="/js/jquery.min.js"></script>
- <script src="/js/fabric.min.js"></script>
- <script src="js/check-bak.js"></script>
- <script src="js/canvasZoom.js"></script>
- <script src="https://unpkg.com/qiniu-js@2.2.2/dist/qiniu.min.js"></script>
- <script src="http://cdn.staticfile.org/semantic-ui/2.3.1/semantic.js"></script>
- <script>
- var qiniuToken = undefined;
- jQuery.ajax({
- type: "GET",
- cache: false,
- dataType: "jsonp",
- url: 'http://127.0.0.1:8360/qiniu/gettoken',
- data: {},
- success: function (res) {
- qiniuToken = res.token;
- }
- });
- canvas.on("mouse:up", function () {
- if (window.drawType && (window.drawType == "wrong" || window.drawType == "smallwrong")) {
-
-
- }
- });
- function cutFun() {
- var objs = canvas.getObjects();
- var checkObj = [];
- for (var i = 0; i < objs.length; i++) {
- if (objs[i].type && objs[i].type != 'image') {
- checkObj.push(objs[i]);
- }
- }
- checkObj.sort(function (x, y) { return x.top - y.top; });
- var checkJson = [];
- var itemSmallRight = 0, itemSmallWrong = 0, prevSmallType = true;
- for (var i = 0; i < checkObj.length; i++) {
- switch (checkObj[i].type) {
- case 'smallright':
- ++itemSmallRight;
- break;
- case 'smallwrong':
- ++itemSmallWrong;
- break;
- case 'right':
- case 'wrong':
- case 'rectangle':
- prevSmallType = false;
- break;
- default:
- break;
- }
- if (prevSmallType == false || i == (checkObj.length - 1)) {
-
- if (itemSmallRight > 0 || itemSmallWrong > 0) {
- checkJson.push({ 'r': 0, 'w': 0, 'sr': itemSmallRight, 'sw': itemSmallWrong, 'url': '' });
- itemSmallRight = 0, itemSmallWrong = 0;
- }
- prevSmallType = true;
- }
-
- if (checkObj[i].type == 'right') {
- checkJson.push({ 'r': 1, 'w': 0, 'sr': 0, 'sw': 0, 'url': '' });
- } else if (checkObj[i].type == 'wrong') {
- checkJson.push({ 'r': 0, 'w': 1, 'sr': 0, 'sw': 0, 'url': '' });
- }
-
- if (checkObj[i].type == 'rectangle') {
- toImgUpload(checkObj[i], checkObj[i].left, checkObj[i].top, checkObj[i].width, checkObj[i].height);
- }
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
-
- function toImgUpload(cObj, left, top, width, height) {
- canvas.remove(cObj);
- var base64 = canvas.toDataURL({
- format: 'png',
- left: left - 12,
- top: top - 10,
- width: width,
- height: height
- });
-
- jQuery("#wrongImg").append('<img src="' + base64 + '"/><br />');
- canvas.add(cObj);
-
- var putExtra = {
- fname: "",
- params: {},
- mimeType: [] || null
- };
- var config = {
- useCdnDomain: true
- };
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
-
- function base64ToBlob(base64, contentType, sliceSize) {
- contentType = contentType || '';
- sliceSize = sliceSize || 512;
- var byteCharacters = atob(base64);
- var byteArrays = [];
- for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
- var slice = byteCharacters.slice(offset, offset + sliceSize);
- var byteNumbers = new Array(slice.length);
- for (var i = 0; i < slice.length; i++) {
- byteNumbers[i] = slice.charCodeAt(i);
- }
- var byteArray = new Uint8Array(byteNumbers);
- byteArrays.push(byteArray);
- }
- var blob = new Blob(byteArrays, { type: contentType });
- return blob;
- }
- </script>
- </body>
- </html>
|