使用jQuery缓存base64中的图像文件
Cache image files in base64 with jQuery
我正试图为我正在使用的图像文件编写缓存。我将使用这个图像文件来使用画布提取图像的部分。但这似乎行不通。如果我第一次调用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;
}
你知道为什么它不能正常工作吗?我使用jQuery Deferred/When来确保图像完全加载到缓存中:
$.when(checkBase64OfImage(background_url)).then(function(){
img_b64 = getBase64OfSubImage(background_url, background_position, size);
}
自己找到解决办法。当试图处理它时,图像没有完全加载(在getBase64OfSubImage
中),尽管它是一个Base64-String。
这个解决方案非常有效:
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();
}
};
相关文章:
- 将包含SVG元素的HTML转换为图像文件
- 由多个图像文件组成的响应地图
- 使用文件夹路径名保存所有图像文件和文件名
- 如何将 html5 画布另存为窗口 8 Metro 应用程序中的图像文件
- 将图像文件存储在猫鼬模式中的二进制数据中,并以html形式显示图像
- 如何使用heatmap.js保存canvas标记生成的图像文件
- 如何使用html / angularjs保存图像文件
- 如何从 HTML 或 Javascript for Windows Phone 访问图像文件
- 在 Windows 现代(地铁)UI 应用中存储图像文件和音频文件的方法是什么?
- 节点 js 流星 js 图像文件上传图像损坏
- 从图像URL javascript html保存图像文件
- 如何使用AJAX读取图像文件并渲染到Canvas
- 浏览器和大量的图像文件处理
- 什么错误I'我在下面的jQuery代码中集成filepicker.io来上传一个图像文件
- 节点:将 base64 源写入图像文件
- 如何将图像文件以及JavaScript变量的值上传到服务器和数据库
- 如何从本地文件夹(磁盘存储)读取或获取图像文件,并使用nodejs服务器将其发送到Angularjs
- 如何使用expressnodejs上传图像文件并进行显示
- 如何用我在HTML5画布上绘制的src保存图像文件
- 图像文件因websocket文件传输而损坏