jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Add Image Auto Adjust

Browse Source
This commit is contained in:
ckcz123 2018-11-21 20:53:04 +08:00
parent 19d7ed2cac
commit cdb81d5eb3
2 changed files with 123 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
_server/editor_mode.js
View File

@ -556,6 +556,90 @@ editor_mode = function (editor) {
} }
selectAppend.onchange(); 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'); var selectFileBtn = document.getElementById('selectFileBtn');
selectFileBtn.onclick = function () { selectFileBtn.onclick = function () {
var loadImage = function (content, callback) { var loadImage = function (content, callback) {
@ -576,48 +660,50 @@ editor_mode = function (editor) {
} }
core.readFile(function (content) { core.readFile(function (content) {
loadImage(content, function (image) { loadImage(content, function (image) {
editor_mode.appendPic.img = image; autoAdjust(image, function (image) {
editor_mode.appendPic.width = image.width; editor_mode.appendPic.img = image;
editor_mode.appendPic.height = image.height; editor_mode.appendPic.width = image.width;
editor_mode.appendPic.height = image.height;
if (selectAppend.value == 'autotile') { if (selectAppend.value == 'autotile') {
for (var ii = 0; ii < 3; ii++) { for (var ii = 0; ii < 3; ii++) {
var newsprite = appendPicCanvas.children[ii]; var newsprite = appendPicCanvas.children[ii];
newsprite.style.width = (newsprite.width = image.width) / ratio + 'px'; newsprite.style.width = (newsprite.width = image.width) / ratio + 'px';
newsprite.style.height = (newsprite.height = image.height) / ratio + 'px'; newsprite.style.height = (newsprite.height = image.height) / ratio + 'px';
}
sprite_ctx.clearRect(0, 0, sprite.width, sprite.height);
sprite_ctx.drawImage(image, 0, 0);
} }
sprite_ctx.clearRect(0, 0, sprite.width, sprite.height); else {
sprite_ctx.drawImage(image, 0, 0); var ysize = selectAppend.value.indexOf('48') === -1 ? 32 : 48;
} for (var ii = 0; ii < 3; ii++) {
else { var newsprite = appendPicCanvas.children[ii];
var ysize = selectAppend.value.indexOf('48') === -1 ? 32 : 48; newsprite.style.width = (newsprite.width = Math.floor(image.width / 32) * 32) / ratio + 'px';
for (var ii = 0; ii < 3; ii++) { newsprite.style.height = (newsprite.height = Math.floor(image.height / ysize) * ysize) / ratio + 'px';
var newsprite = appendPicCanvas.children[ii]; }
newsprite.style.width = (newsprite.width = Math.floor(image.width / 32) * 32) / ratio + 'px';
newsprite.style.height = (newsprite.height = Math.floor(image.height / ysize) * ysize) / ratio + 'px';
} }
}
//画灰白相间的格子 //画灰白相间的格子
var bgc = bg.getContext('2d'); var bgc = bg.getContext('2d');
var colorA = ["#f8f8f8", "#cccccc"]; var colorA = ["#f8f8f8", "#cccccc"];
var colorIndex; var colorIndex;
var sratio = 4; var sratio = 4;
for (var ii = 0; ii < image.width / 32 * sratio; ii++) { for (var ii = 0; ii < image.width / 32 * sratio; ii++) {
colorIndex = 1 - ii % 2; colorIndex = 1 - ii % 2;
for (var jj = 0; jj < image.height / 32 * sratio; jj++) { for (var jj = 0; jj < image.height / 32 * sratio; jj++) {
bgc.fillStyle = colorA[colorIndex]; bgc.fillStyle = colorA[colorIndex];
colorIndex = 1 - colorIndex; colorIndex = 1 - colorIndex;
bgc.fillRect(ii * 32 / sratio, jj * 32 / sratio, 32 / sratio, 32 / sratio); bgc.fillRect(ii * 32 / sratio, jj * 32 / sratio, 32 / sratio, 32 / sratio);
}
} }
}
//把导入的图片画出 //把导入的图片画出
source_ctx.drawImage(image, 0, 0); source_ctx.drawImage(image, 0, 0);
editor_mode.appendPic.sourceImageData=source_ctx.getImageData(0,0,image.width,image.height); editor_mode.appendPic.sourceImageData=source_ctx.getImageData(0,0,image.width,image.height);
//重置临时变量 //重置临时变量
selectAppend.onchange(); selectAppend.onchange();
});
}); });
}, null, 'img'); }, null, 'img');
@ -630,21 +716,6 @@ editor_mode = function (editor) {
var imgData=editor_mode.appendPic.sourceImageData; var imgData=editor_mode.appendPic.sourceImageData;
var nimgData=new ImageData(imgData.width,imgData.height); var nimgData=new ImageData(imgData.width,imgData.height);
// ImageData .data 形如一维数组,依次排着每个点的 R(0~255) G(0~255) B(0~255) A(0~255) // 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 convert=function(rgba,delta){
var round=Math.round; var round=Math.round;
// rgbToHsl hue2rgb hslToRgb from https://github.com/carloscabo/colz.git // rgbToHsl hue2rgb hslToRgb from https://github.com/carloscabo/colz.git

2
libs/control.js
View File

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