Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

154
Vistas
flashing base64 image in canvas

I can't understand why when I'm creating an image from a base64 source (coming from another canvas cnvBase) it 'flashes' : the real image imgBW is OK and remains in place until a new base64 image is sended by cnvBase, but in cnvBW it appears for a fraction of a second and disappears immediately.

HTML

   <canvas id="cnvBase"></canvas>
   <img id="imgBW"> 
   <canvas id="cnvBW"></canvas>

JS

function createBWImg(){

    console.log('image '+imageNB.substr(0,50)) // data:image/png;base64,iVBORw0KG....
    
    document.getElementById('imgBW').style.width = w+'px';
    document.getElementById('imgBW').style.height = y+'px';
    document.getElementById('imgBW').src = imageNB;

    let newimage = new Image();
    newimage.onload = function() {
       ctxBW.drawImage(newimage, 0, 0);
    };
    newimage.src = imageNB;

 }

Note: cnvBase sends a new image every second when User moves his smartphone (beta value):

window.addEventListener('deviceorientation', function(event) {

    alpha= Math.round(event.alpha);
    beta = Math.round(event.beta);
    gamma= Math.round(event.gamma);

    setTimeout(function() { 
        if (beta >= 0 && beta <= 90) {
            getValues(alpha,beta,gamma);    
        }   
    }, 1000);

});

The getValues(a,b,g) function retrieves a part of the camera stream and places it in cnvBase according to the value of b

EDIT

OK, I think that image 'seems' to remain the same but in fact not. With this code, canvas keeps the right color for one second without flashing... I think something happens (but what?) during image production: something is sent to canvas (but what?).

    let color;
    
    if(b>=0 &&b<34) color='red';
    if(b>=34 &&b<67) color='green';
    if(b>=67 &&b<90) color='blue';
    
    ctxBW.fillStyle = color;
    ctxBW.fillRect(0, 0, w, y);

EDIT 2

More and more strange. When adding this part of code for PCs (because changing beta orientation is hard to obtain) it works perfectly: image in canvas doesn't flash and remains in place, but not on phones where it appears and disappears as soon as created (flash effect)

if(screen > 600){  // screen is screen width
  setInterval(function(){
    send_pseudo_beta(Math.floor((Math.random() * 10)+1)*8) // random beta
  },1000);
}
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda