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