Javascript 使用jQuery在base64中缓存图像文件

我正在尝试为正在使用的图像文件编写缓存。我将使用此图像文件使用画布提取部分图像。 但这似乎不起作用。如果我第一次为url调用函数（空缓存）

getBase64OfSubImage

返回错误的子图像（空png）。但它似乎只是偶尔发生。 当我第二次运行相同的命令时，它返回正确的子映像

var backgroundImageURLs = Object();

function checkBase64OfImage(url){
    var dfd = $.Deferred();

    if(backgroundImageURLs[url] !== undefined){
        dfd.resolve();
    }
    else {
        var req = new XMLHttpRequest();
        req.overrideMimeType('text/plain; charset=x-user-defined');
        req.open('GET', url, true);
        req.responseType = 'arraybuffer';
        req.onload = function() {
            buffer = req.mozResponseArrayBuffer || req.response;
            type = req.getResponseHeader('Content-Type');

            var blob = new Blob([buffer], {type: type});
            var fr = new FileReader();
            fr.onload = function() {
                backgroundImageURLs[url] = window.btoa(fr.result);
                dfd.resolve();
            };
            fr.readAsBinaryString(blob);
        };
        req.send(null);
    }

    return dfd.promise();
}

function getBase64OfSubImage(url, pos, size){
    if(backgroundImageURLs[url] !== undefined){
        var base64_img = "data:image/png;base64,"+backgroundImageURLs[url];
        var tmp_img = new Image();
        tmp_img.setAttribute("src", base64_img);

        var canvas = $('<canvas/>')[0];
        canvas.width = size[0];
        canvas.height = size[1];

        canvas.getContext('2d').drawImage(tmp_img, pos[0], pos[1], size[0], size[1], 0, 0, size[0], size[1]);
        return canvas.toDataURL().split(",")[1]; //Get Base64-representation of partial image
    }
    return false;
}

---

我自己找到了解决办法。尝试处理图像时（在

getBase64OfSubImage

中），该图像未完全加载，尽管它是Base64字符串

此解决方案非常有效：

function getBase64OfSubImage(){
    if(backgroundImageURLs[url] !== undefined){
        var base64_img = "data:image/png;base64,"+backgroundImageURLs[url];
        var tmp_img = new Image();
        tmp_img.onload = function(){
            var canvas = $('<canvas/>')[0];
            canvas.width = size[0];
            canvas.height = size[1];

            canvas.getContext('2d').drawImage(this, pos[0], pos[1], size[0], size[1], 0, 0, size[0], size[1]);
            finish(canvas.toDataURL().split(",")[1]); //Get Base64-representation of partial image
        };
        tmp_img.setAttribute("src", base64_img);
    }
    else {
        checkBase64OfImage();
    }
};

函数getBase64OfSubImage（）{ if（backgroundImageURLs[url]！==未定义）{ var base64_img=“data:image/png；base64，”+backgroundImageURLs[url]； var tmp_img=新图像（）； tmp_img.onload=函数（）{ var画布=$（''）[0]； canvas.width=大小[0]； canvas.height=大小[1]； canvas.getContext（'2d'）.drawImage（这个，位置[0]，位置[1]，大小[0]，大小[1]，0,0，大小[0]，大小[1]）； finish（canvas.toDataURL（）.split（“，”[1]）；//获取部分图像的Base64表示形式 }; tmp_img.setAttribute（“src”，base64_img）； } 否则{ checkBase64OfImage（）； } };

---

我自己找到了解决方案。尝试处理图像时（在

getBase64OfSubImage

中），该图像未完全加载，尽管它是Base64字符串

此解决方案非常有效：

function getBase64OfSubImage(){
    if(backgroundImageURLs[url] !== undefined){
        var base64_img = "data:image/png;base64,"+backgroundImageURLs[url];
        var tmp_img = new Image();
        tmp_img.onload = function(){
            var canvas = $('<canvas/>')[0];
            canvas.width = size[0];
            canvas.height = size[1];

            canvas.getContext('2d').drawImage(this, pos[0], pos[1], size[0], size[1], 0, 0, size[0], size[1]);
            finish(canvas.toDataURL().split(",")[1]); //Get Base64-representation of partial image
        };
        tmp_img.setAttribute("src", base64_img);
    }
    else {
        checkBase64OfImage();
    }
};

函数getBase64OfSubImage（）{ if（backgroundImageURLs[url]！==未定义）{ var base64_img=“data:image/png；base64，”+backgroundImageURLs[url]； var tmp_img=新图像（）； tmp_img.onload=函数（）{ var画布=$（''）[0]； canvas.width=大小[0]； canvas.height=大小[1]； canvas.getContext（'2d'）.drawImage（这个，位置[0]，位置[1]，大小[0]，大小[1]，0,0，大小[0]，大小[1]）； finish（canvas.toDataURL（）.split（“，”[1]）；//获取部分图像的Base64表示形式 }; tmp_img.setAttribute（“src”，base64_img）； } 否则{ checkBase64OfImage（）； } };