Add Image Auto Adjust
This commit is contained in:
ckcz123
parent
19d7ed2cac
commit
cdb81d5eb3
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user