JavaScript를 사용하여 GIF 이미지를 Base64 데이터 URI로 변환하는 동안 성능 문제가 발생했습니다.

Question

저는 하이브리드 (Cordova) 모바일 앱 개발자이며 제 요구 사항은 다양한 소셜 미디어 플랫폼에 GIF 이미지를 공유하는 것입니다. 내 이미지를 Base64 데이터 URL로 변환하는 함수를 작성했습니다. 주로 이미지를 변환하고 공유를 원활하게하지만 때로는 공유 버튼 클릭시 이미지를 공유하지 못합니다. 때로는 공유 창이 열리지 않습니다. 이미지를 변환하는 데 조금 오래 걸릴 것으로 생각됩니다. 여기 내 예제 코드입니다 :

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(); 
} 

그리고 이것은 함수가 호출되는 방법입니다

//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

변환이 다음 번 공유 대화 상자를 실행, 아직 완료되지 않은 경우 변수를 설정하십시오 변환 (아래 openShare 변수의 사용에 주목) 완료 :

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; 
     } 
    }); 
};