Я работаю с JavaScript и создал классную программу, чтобы нарезать фотографию и усреднить цвета.Я добавлял индикатор выполнения, и что бы я ни делал (он был в цикле, который усредняется, и у него была задана команда интервала), он не обновлялся, пока цикл не завершился.Мне было интересно, знает ли кто-нибудь, как принудительно обновить экран вместо расчета или каким-либо другим способом решить эту проблему ... заранее спасибо.
<html>
<input id="input" type = "file" onchange="changeCanvas()" accept="image*/">
<input type = "number" min="1" value="1" id="numb" onchange="calculate()">
<input type="checkbox" id="check" value = "1">
<input type="button" onclick= "calculate()" value ="Update">
<input type="checkbox" id="mode" value = "1">
<!input type="color" id="color" onchange= "addColor()">
<br>
<progress id="bar" value="0"> </progress>
<br>
<canvas id = "canvas"></canvas>
<br>
<canvas id = "canvas2"></canvas>
<script>
var color = [[243,243,242],[161,165,162],[196,40,27],[13,105,171],[245,205,47],[27,42,52],[40,127,70],[75,151,74],[180,210,227]];
var ratioHeightToWidth = 5/6;
var pdone = 0;
window.onload = function(){
setInterval(progress,10);
}
function addColor(){
var inColor = document.getElementById("color").value;
var r = parseInt(inColor.substring(1,3), 16);
var g = parseInt(inColor.substring(3,5), 16);
var b = parseInt(inColor.substring(5,8), 16);
//console.log(inColor + ", " + r + ", " + g + ", " + b)
color[color.length] = [r,g,b];
}
function changeCanvas() {
console.log("changeCanvas has started");
var file = document.getElementById("input").files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function(){
var canvas = document.getElementById("canvas");
var canvasContext = canvas.getContext("2d");
var img = new Image();
img.src = reader.result;
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
canvasContext.drawImage(img,0,0);
}
}
}
function calculate(){
var checked = document.getElementById("check").checked;
var canvas = document.getElementById("canvas");
var canvasContext = canvas.getContext("2d");
var xa = document.getElementById("numb").value;
var xw = (canvas.width/xa);
if (checked){
var ya = Math.ceil(canvas.height/Math.ceil(xw/ratioHeightToWidth));
var yw = Math.ceil(xw*6/5);
}else{
var ya = Math.floor(canvas.height/Math.floor(xw/ratioHeightToWidth));
var yw = Math.floor(xw/ratioHeightToWidth);
}
var space = 0;
var canvas2 = document.getElementById("canvas2");
var canvas2Context = canvas2.getContext("2d");
canvas2.width = xa*xw + space*xa;
canvas2.height = canvas.height + space*ya;
//canvas2Context.drawImage(canvas,0,0);
for (var county = 0; county < ya; county++){
for (var countx = 0; countx < xa; countx++){
var startx = countx*xw;
var starty = county*yw;
var endx = startx+xw;
var rTot = 0;
var gTot = 0;
var bTot = 0;
var aTot = 0;
pdone = Math.floor(((countx+1)+county*xa)*100/(xa*ya));
console.log("Calculating: [" + countx + ", " + county + "], " + pdone + "% Compleated");
//progress(pdone);
for (var countxp = startx; countxp < startx+xw; countxp++){
for (var countyp = starty; countyp < starty+yw; countyp++){
var colors = canvasContext.getImageData(countxp,countyp,1,1).data;
//console.log(colors);
rTot += colors[0];
gTot += colors[1];
bTot += colors[2];
aTot += colors[3];
}
}
var rAvg = rTot/(xw*yw);
var gAvg = gTot/(xw*yw);
var bAvg = bTot/(xw*yw);
var aAvg = aTot/(xw*yw);
var rOut = 0;
var gOut = 0;
var bOut = 0;
if (document.getElementById("mode").checked){
var value = 257;
for (var count = 0; count < color.length; count++){
var dR = Math.abs(rAvg-color[count][0]);
var dG = Math.abs(gAvg-color[count][1]);
var dB = Math.abs(bAvg-color[count][2]);
var avg = (dR+dG+dB)/3;
if (avg<value){
rOut = color[count][0];
gOut = color[count][1];
bOut = color[count][2];
value = avg;
}
}
}else{
rOut = rAvg;
gOut = gAvg;
bOut = bAvg
}
canvas2Context.fillStyle = "rgb(" + rOut + ", " + gOut + ", " + bOut + ")";
canvas2Context.fillRect(startx+space*countx,starty+space*county,xw,yw);
}
}
}
function progress(){
//console.log("foo");
document.getElementById("bar").value = pdone;
}
</script>
</html>