Add Image Auto Adjust

_server/editor_mode.js

@@ -556,6 +556,90 @@ editor_mode = function (editor) {
         }
         selectAppend.onchange();
 
+        var getPixel=function(imgData, x, y) {
+            var offset = (x + y * imgData.width) * 4;
+            var r = imgData.data[offset+0];
+            var g = imgData.data[offset+1];
+            var b = imgData.data[offset+2];
+            var a = imgData.data[offset+3];
+            return [r,g,b,a];
+        }
+        var setPixel=function(imgData, x, y, rgba) {
+            var offset = (x + y * imgData.width) * 4;
+            imgData.data[offset+0]=rgba[0];
+            imgData.data[offset+1]=rgba[1];
+            imgData.data[offset+2]=rgba[2];
+            imgData.data[offset+3]=rgba[3];
+        }
+
+        var autoAdjust = function (image, callback) {
+            var changed = false;
+
+            // Step 1: 检测白底
+            var tempCanvas = document.createElement('canvas').getContext('2d');
+            tempCanvas.canvas.width = image.width;
+            tempCanvas.canvas.height = image.height;
+            tempCanvas.mozImageSmoothingEnabled = false;
+            tempCanvas.webkitImageSmoothingEnabled = false;
+            tempCanvas.msImageSmoothingEnabled = false;
+            tempCanvas.imageSmoothingEnabled = false;
+            tempCanvas.drawImage(image, 0, 0);
+            var imgData = tempCanvas.getImageData(0, 0, image.width, image.height);
+            var trans = 0, white = 0;
+            for (var i=0;i<image.width;i++) {
+                for (var j=0;j<image.height;j++) {
+                    var pixel = getPixel(imgData, i, j);
+                    if (pixel[3]==0) trans++;
+                    if (pixel[0]==255 && pixel[1]==255 && pixel[2]==255 && pixel[3]==255) white++;
+                }
+            }
+            if (white>trans*10 && confirm("看起来这张图片是以白色为底色，是否自动调整为透明底色？")) {
+                for (var i=0;i<image.width;i++) {
+                    for (var j=0;j<image.height;j++) {
+                        var pixel = getPixel(imgData, i, j);
+                        if (pixel[0]==255 && pixel[1]==255 && pixel[2]==255 && pixel[3]==255) {
+                            setPixel(imgData, i, j, [0,0,0,0]);
+                        }
+                    }
+                }
+                tempCanvas.clearRect(0, 0, image.width, image.height);
+                tempCanvas.putImageData(imgData, 0, 0);
+                changed = true;
+            }
+
+            // Step 2: 检测长宽比
+            var ysize = selectAppend.value.indexOf('48') === -1 ? 32 : 48;
+            if ((image.width%32!=0 || image.height%ysize!=0) && (image.width<=128 && image.height<=ysize*4)
+                && confirm("目标长宽不符合条件，是否自动进行调整？")) {
+                var ncanvas = document.createElement('canvas').getContext('2d');
+                ncanvas.canvas.width = 128;
+                ncanvas.canvas.height = 4*ysize;
+                ncanvas.mozImageSmoothingEnabled = false;
+                ncanvas.webkitImageSmoothingEnabled = false;
+                ncanvas.msImageSmoothingEnabled = false;
+                ncanvas.imageSmoothingEnabled = false;
+                var w = image.width / 4, h = image.height / 4;
+                for (var i=0;i<4;i++) {
+                    for (var j=0;j<4;j++) {
+                        ncanvas.drawImage(tempCanvas.canvas, i*w, j*h, w, h, i*32 + (32-w)/2, j*ysize + (ysize-h)/2, w, h);
+                    }
+                }
+                tempCanvas = ncanvas;
+                changed = true;
+            }
+
+            if (!changed) {
+                callback(image);
+            }
+            else {
+                var nimg = new Image();
+                nimg.onload = function () {
+                    callback(nimg);
+                };
+                nimg.src = tempCanvas.canvas.toDataURL();
+            }
+        }
+
         var selectFileBtn = document.getElementById('selectFileBtn');
         selectFileBtn.onclick = function () {
             var loadImage = function (content, callback) {
@@ -576,6 +660,7 @@ editor_mode = function (editor) {
             }
             core.readFile(function (content) {
                 loadImage(content, function (image) {
+                    autoAdjust(image, function (image) {
                         editor_mode.appendPic.img = image;
                         editor_mode.appendPic.width = image.width;
                         editor_mode.appendPic.height = image.height;
@@ -619,6 +704,7 @@ editor_mode = function (editor) {
                         //重置临时变量
                         selectAppend.onchange();
                     });
+                });
             }, null, 'img');
 
             return;
@@ -630,21 +716,6 @@ editor_mode = function (editor) {
             var imgData=editor_mode.appendPic.sourceImageData;
             var nimgData=new ImageData(imgData.width,imgData.height);
             // ImageData .data 形如一维数组,依次排着每个点的 R(0~255) G(0~255) B(0~255) A(0~255)
-            var getPixel=function(imgData, x, y) {
-                var offset = (x + y * imgData.width) * 4;
-                var r = imgData.data[offset+0];
-                var g = imgData.data[offset+1];
-                var b = imgData.data[offset+2];
-                var a = imgData.data[offset+3];
-                return [r,g,b,a];
-            }
-            var setPixel=function(imgData, x, y, rgba) {
-                var offset = (x + y * imgData.width) * 4;
-                imgData.data[offset+0]=rgba[0];
-                imgData.data[offset+1]=rgba[1];
-                imgData.data[offset+2]=rgba[2];
-                imgData.data[offset+3]=rgba[3];
-            }
             var convert=function(rgba,delta){
                 var round=Math.round;
                 // rgbToHsl hue2rgb hslToRgb from https://github.com/carloscabo/colz.git

libs/control.js

@@ -2796,6 +2796,8 @@ control.prototype.resize = function(clientWidth, clientHeight) {
     if (!core.flags.enableMana) count--;
     if (!core.flags.enableSkill) count--;
 
+    if (count>12) alert("当前状态栏数目大于12，请调整到不超过12以避免手机端出现显示问题。");
+
     var statusLineHeight = BASE_LINEHEIGHT * 9 / count;
     var statusLineFontSize = DEFAULT_FONT_SIZE;
     if (count>9) statusLineFontSize = statusLineFontSize * 9 / count;