增加图片加载与画布操作的通用工具

stmms-web/src/main/webapp/WEB-INF/views/include/head.jsp

@@ -33,4 +33,7 @@
 <link href="${ctxStatic}/jquery-jbox/2.3/Skins/Bootstrap/jbox.css" rel="stylesheet" />
 <script src="${ctxStatic}/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
 <script src="${ctxStatic}/jquery-jbox/2.3/i18n/jquery.jBox-zh-CN.min.js" type="text/javascript"></script>
+<script src="${ctxStatic}/utils/easy-canvas.js" type="text/javascript"></script>
+<script src="${ctxStatic}/utils/image-loader.js" type="text/javascript"></script>
+
 <link rel="shortcut icon" href="${ctxStatic}/favicon.ico">

stmms-web/src/main/webapp/WEB-INF/views/include/trialDetail.jsp

@@ -1,7 +1,6 @@
 <%@ page contentType="text/html;charset=UTF-8"%>
 <link rel="stylesheet" type="text/css" href="${ctxStatic}/jBox/Source/jBox.css">
 <script type="text/javascript" src="${ctxStatic}/jBox/Source/jBox.min.js"></script>
-<script type="text/javascript" src="${ctxStatic}/easy-canvas/easy-canvas.js"></script>
 
 <div id="trial-detail-content" class="container-fluid" style="display:none">
 <div class="row-fluid">
@@ -38,7 +37,6 @@ function initTrialDetailPopover(title, libraryId) {
 	trailDetailModal.setWidth($(window).width()*0.9);
 	trailDetailModal.setHeight($(window).height()*0.85);
 	trailDetailModal.setTitle(title);
-	trailDetailModal.setContent($('#trial-detail-content'));
 	trailDetailModal.open();
 }
 
@@ -55,45 +53,25 @@ function initTrialDetailContent(libraryId){
 	                var history = data.historyList[i];
 	                $('#trial-history').append('<tr><td>'+history.loginName+'</td><td>'+history.name+'</td><td>'+history.score+'</td><td>'+history.time+'</td></tr>');
 	            }
-	            buildImages(data.imageServer, data.urls, data.pictureConfig);
+	            new ImageLoader( {
+	                server: data.imageServer,
+	                urls: data.urls,
+	                config: data.pictureConfig,
+	                onError: function(error){
+	                    trailDetailModal.setTitle('加载失败');
+	                },
+	                onSuccess: function(images){
+	                    trailDetailModal.setContent($('#trial-detail-content'));
+	                    trialCanvas.setMaxWidth($('#trial-left-div').width()*0.95);
+	                    trialCanvas.drawImages(images, data.pictureConfig);
+	                }
+	            });
 	        }else {
 	            trailDetailModal.setTitle('加载失败')
 	        }
         }
     });
 }
-
-function buildImages(imageServer, picUrls, config) {
-    var indexSet = {};
-    for(var i=0;i<config.length;i++){
-        indexSet[config[i].i-1] = true;
-    }
-    //调用图片预加载函数，实现回调函数
-    var imageObjects = [];
-    loadImages(imageObjects, imageServer, indexSet, picUrls, 0, function(images) {
-        trialCanvas.setMaxWidth($('#trial-left-div').width()*0.95);
-        trialCanvas.drawImages(images, config);
-    });
-}
-
-function loadImages(images, imageServer, indexSet, urls, number, callback) {
-    if (urls != undefined && number < urls.length) {
-        if(indexSet[number]==true) {
-            var img = new Image();
-            img.onload = function() {
-                images.push(img);
-                loadImages(images, imageServer, indexSet, urls, number + 1, callback);
-            }
-            img.crossOrigin = '';
-            img.src = imageServer + urls[number] + '?' + new Date().getTime();
-        }else {
-            images.push({});
-            loadImages(images, imageServer, indexSet, urls, number + 1, callback);
-        }
-    } else {
-        callback.call(this, images);
-    }
-}
 </script>
 
 

stmms-web/src/main/webapp/static/easy-canvas/easy-canvas.js → stmms-web/src/main/webapp/static/utils/easy-canvas.js

@@ -1,3 +1,10 @@
+/**
+ * 针对画布的辅助工具类
+ * 1. 灵活调整大小与视网膜屏幕下的高清显示
+ * 2. 按照云阅卷的图片拼接规则绘制图片内容
+ * 
+ * @param {} option 
+ */
 function EasyCanvas(option) {
     this.canvas = option.canvas
     this.context = this.canvas.getContext("2d")

stmms-web/src/main/webapp/static/utils/image-loader.js

@@ -0,0 +1,66 @@
+/**
+ * 针对云阅卷场景多图片并行加载的工具类
+ * 1. 支持指定服务器地址
+ * 2. 支持按云阅卷图片拼接规则筛选实际需要加载的图片
+ * 3. 支持指定是否强制刷新图片
+ * 
+ * @param {*} option 
+ */
+function ImageLoader(option) {
+    this.server = option.server || ''
+    this.urls = option.urls || []
+    this.config = option.config || []
+    this.flush = option.flush === true
+    this.onSuccess = option.onSuccess || (function() {})
+    this.onError = option.onError || (function() {})
+    this.start()
+}
+
+ImageLoader.prototype.start = function() {
+    this.images = []
+    this.needCount = 0
+    this.successCount = 0
+    for (let i = 0; i < this.urls.length; i++) {
+        let image = new Image()
+        this.images.push(image)
+        if (this.needLoad(i + 1)) {
+            this.needCount++
+
+            image.parent = this
+            image.crossOrigin = ''
+            image.src = this.server + this.urls[i] + (this.flush ? ('?' + new Date().getTime()) : '')
+            image.onload = function() {
+                this.parent.successCount++
+                if (this.parent.successCount == this.parent.needCount) {
+                    this.parent.onFinish()
+                }
+            }
+            image.onerror = function() {
+                this.parent.onFinish(this.url + ' load error')
+            }
+        }
+    }
+}
+
+ImageLoader.prototype.onFinish = function(error) {
+    if (error) {
+        this.onError(error)
+    } else {
+        this.onSuccess(this.images)
+    }
+}
+
+ImageLoader.prototype.needLoad = function(number) {
+    if (this.config != undefined && this.config.length > 0) {
+        let find = false
+        for (let i = 0; i < this.config.length; i++) {
+            if (this.config[i].i == number) {
+                find = true
+                break
+            }
+        }
+        return find
+    } else {
+        return true
+    }
+}