Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

155
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda