Estoy usando PanoJS para crear una plataforma que pueda ver y modificar imágenes enormes.

Lo que debo hacer es representar mosaicos de imágenes en varios elementos del lienzo y cambiar el brillo, el contraste y la opacidad cuando el usuario arrastra el selector de rango.

Pero el problema es que, cuando ejecuto esta función updateTiles , los mosaicos no se actualizan uno por uno, esperan hasta que todos los mosaicos se actualicen y rendericen juntos, Y esta función de carga tampoco funciona como se esperaba, esta opacidad cambia con el elemento de carga se renderiza después de que todos los mosaicos también se actualizaron, eso no es lo que esperaba ...

Aquí están los códigos que escribí sobre este senario, ¿alguna idea de cómo se supone que debo hacer para obtener lo que quiero?

¡Muchas gracias!

 ... PanoJS.prototype.updateTiles = function () { const handleCanvasUpdate = (element) => { const ctx = element.getContext('2d') const imgData = new ImageData(new Uint8ClampedArray(JSON.parse(element._imgData.data)), element._imgData.height, element._imgData.width) const changedImgData = this.changeImgData(imgData) // -1 ~ 1 ctx.putImageData(changedImgData, 0, 0); } const tag = this.showLoading('updateTiles') for (let i = 0; i < this.well.children.length; i++) { const element = this.well.children[i]; if (element.tagName.toUpperCase() === 'CANVAS') { handleCanvasUpdate(element) } } this.hideLoading(tag) } PanoJS.prototype.changeImgData = function (imgdata) { // this imgdata can be very large const data = imgdata.data; for (let i = 0; i < data.length; i += 4) { // brightness const hsv = this.rgb2hsv([data[i], data[i + 1], data[i + 2]]); hsv[2] *= 1 + this.luminance; const rgb = this.hsv2rgb([...hsv]); data[i] = rgb[0]; data[i + 1] = rgb[1]; data[i + 2] = rgb[2]; // contrast const _contrast = (this.contrast / 100) + 1; //convert to decimal & shift range: [0..2] const intercept = 128 * (1 - _contrast); data[i] = data[i] * _contrast + intercept; data[i + 1] = data[i + 1] * _contrast + intercept; data[i + 2] = data[i + 2] * _contrast + intercept; // opacity data[i + 3] = data[i + 3] * this.opacity; } return imgdata; } PanoJS.prototype.showLoading = function (name) { counter++ const tag = `${counter}${name}` console.time(tag) this.loadingMask.style.opacity = 1 this.loadingCount++ return tag } PanoJS.prototype.hideLoading = function (tag) { // requestAnimationFrame(() => { if (this.loadingCount) { this.loadingCount-- } // console.log(this.loadingMask.style.opacity); if (this.loadingCount === 0) { this.loadingMask.style.opacity = 0 } console.timeEnd(tag) // console.log(this.loadingCount); // }) } ...