Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

156
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!