Problème de performance lors de la conversion de l'image GIF en uri de données Base64 en utilisant JavaScript

Question

Je suis un développeur d'applications mobiles hybrides (Cordova) et mon exigence est de partager des images GIF sur diverses plateformes de médias sociaux. J'ai écrit une fonction qui convertit mon image en URL de données Base64. Généralement, il convertit l'image et rend le partage lisse, mais parfois, il ne parvient pas à partager l'image sur le bouton clic de partage. Et parfois, il n'ouvre pas la fenêtre de partage. Je pense qu'il faut un peu de temps pour convertir l'image. Voici mon exemple de code:

function convertFileToDataURLviaFileReader(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.responseType = 'blob'; 
    xhr.onload = function() { 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      callback(reader.result); 
     } 
     reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.send(); 
} 

Et voilà comment la fonction est appelée:

//The below function will be called on click of share buttons 

function showSnackBar(e) { 
    imgSource = null; 
    selectedImgId = null; 
    imgDataURL = null; 
    var x = document.getElementById("snackbar"); 
    imgSource = e.target.currentSrc; 
    selectedImgId = e.target.id; 
    x.className = "show"; 
    setTimeout(function() { 
     x.className = x.className.replace("show", ""); 
    }, 3000); 
    //calling function to Convert ImageURL to DataURL 
    convertFileToDataURLviaFileReader(imgSource, function (base64Img) { 
     imgDataURL = base64Img; 
    }); 
    $("#btnShare").click(function (e) { 
     if(imgDataURL != null) { 
      window.plugins.socialsharing.share(null, 'Android filename', imgDataURL, null) 
     } 
    }) 
}; 

Answer 1

Essayer de définir une variable si la conversion ne se fait pas encore, le lancement puis la boîte de dialogue de part une fois que la la conversion est terminée (notez l'utilisation de la variable ci-dessous):

function showSnackBar(e) { 
    imgSource = null; 
    selectedImgId = null; 
    imgDataURL = null; 
    var x = document.getElementById("snackbar"); 
    imgSource = e.target.currentSrc; 
    selectedImgId = e.target.id; 
    x.className = "show"; 
    setTimeout(function() { 
     x.className = x.className.replace("show", ""); 
    }, 3000); 

    var openShare = false; 
    //calling function to Convert ImageURL to DataURL 
    convertFileToDataURLviaFileReader(imgSource, function (base64Img) { 
     imgDataURL = base64Img; 
     if(openShare){ 
      openShare = false; 
      window.plugins.socialsharing.share(null, 'Android filename', imgDataURL, null); 
     } 
    }); 

    $("#btnShare").click(function (e){ 
     if(imgDataURL != null) { 
      window.plugins.socialsharing.share(null, 'Android filename', imgDataURL, null) 
     }else{ 
      openShare = true; 
     } 
    }); 
};