使用JavaScript将GIF图像转换为Base64数据时的性能问题

时间:2017-04-08 04:16:46

标签: javascript android cordova base64 image-conversion

我是混合(Cordova)移动应用开发者,我的要求是将GIF图像分享到各种社交媒体平台。我编写了一个将我的图像转换为Base64数据网址的函数。它主要是转换图像并使共享平滑,但有时,它无法在点击共享按钮时共享图像。有时它不会打开共享窗口。我怀疑转换图像需要一点时间。这是我的示例代码:

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

1 个答案:

答案 0 :(得分:0)

如果转换尚未完成,请尝试设置变量,然后在转换完成后启动共享对话框(请注意下面使用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;
        }
    });
};