项目开发中加载远程服务器图片资源是基本需求之一。游戏中在线加载一张图片(比如玩家头像)，想保存在本地，并为这张图片生成一个唯一ID或MD5，下次启动的时候，就可以从本地读取数据生成对应的精灵。在使用Cocos Creator开发游戏时，官方很友好地为我们提供了加载远程资源的API(如下)，这几个API的好处在于根据URL从服务器加载图片后，本地也会有一份图片的存储，下次加载的时候，如果URL相同，则直接从本地加载。详情见官方 加载远程资源和设备资源
// 远程 url 带图片后缀名
var remoteUrl = "/";
(remoteUrl, function (err, texture) {
// Use texture to create sprite frame
});
// 远程 url 不带图片后缀名，此时必须指定远程图片文件的类型
remoteUrl = "/emoji?id=124982374";
({url: remoteUrl, type: 'png'}, function () {
// Use texture to create sprite frame
});
// 用绝对路径加载设备存储内的资源，比如相册
var absolutePath = "/dara/data/some/path/to/image.png"
(absolutePath, function () {
// Use texture to create sprite frame
});
本来认为官方自带本地缓存的加载远程图片API已经很完美了。但是最近自己在使用时，发现服务器返回的图片URL并不如官方API限定的那样有后缀(.png or .jpg), 【"http://mapi1./home/?userId=8201709288446120&mt="】，并且后台开发人员说图片格式不唯一，可能是png或jpg格式的(其实后台帮忙转成统一的格式也挺容易的嘛，但是他们lazy)。所以在无法确定URL对应的图片格式时，官方的API也就无法满足实际需求，这种情况下我们得自己想办法去实现。
小插曲：
发现这个问题后，首先我在论坛搜了一下关键词，找到一个两年前方案，但是无法直接运行起来，于是我在论坛里发了个帖子，并希望近期遇到类似问题的开发者给个方案。然而意料地得到如下回复，让人很无语。不知道留言这个人心理是否有问题，但肯定不健康。从事技术开发，每个人在不同阶段都会遇到各种问题，或容易或简单。即便你技术再牛，也不应该歧视别人，正所谓“每一位牛逼的人都曾经历过一段傻逼的岁月”。
论坛不友好回答.png
所以在我解决了这个问题之后，我将它在博客中记录下来，并希望可以帮助到其他小伙伴。所谓“赠人玫瑰，手留余香”(The fragrance always stays in the hand that gives the rose to others)，相信好人一生平安。
耐心分析源码，并参考论坛上唯一一个两年前的大神方案，改进并优化之后，终于可以完美运行在当前环境中(Creator版本1.9.1)。接下来我将分享出经过我封装之后的图片下载器文件 。
使用方法：
= {};
= require("ImageLoader");
(imageURL,function(spriteFrame){
= spriteFrame;
}.bind(this));
注：imageURL就是远程服务器的图片地址。
/*
* @Author: Damo
* @Date: 2018-06-08 09:56:20
* @Last Modified by: Damo
* @Last Modified time: 2018-06-10 13:29:52
*/
({
extends: ,
statics : {
loadImage : function (url,callback){
(url,function (err,tex) {
var spriteFrame = new (tex, (0, 0, , ));
callback(spriteFrame);
});
},
imageLoadTool(url, callback){
var dirpath = () + 'customHeadImage/';
console.log("dirpath ->",dirpath);
var md5Sign = require("signMd5").md5Sign;
let md5URL = md5Sign(url);
var filepath = dirpath + md5URL + '.jpg';
("filepath ->",filepath);
function loadEnd(){
(filepath, function(err, tex){
if( err ){
(err);
}else{
var spriteFrame = new (tex);
if( spriteFrame ){
();
callback(spriteFrame);
}
}
});
}
if( (filepath) ){
('Remote is find' + filepath);
loadEnd();
return;
}
var saveFile = function(data){
if( typeof data !== 'undefined' ){
if( !(dirpath) ){
(dirpath);
}else{
("路径exist");
}
// new Uint8Array(data) writeDataToFile writeStringToFile
if( ( new Uint8Array(data) , filepath) ){
('Remote write file succeed.');
loadEnd();
}else{
('Remote write file failed.');
}
}else{
('Remote download file failed.');
}
};
var xhr = new XMLHttpRequest();
= function () {
(" " +);
(" " +);
if ( === 4 ) {
if( === 200){
//responseType一定要在外面设置
// = 'arraybuffer';
saveFile();
}else{
saveFile(null);
}
}
}.bind(this);
//responseType一定要在外面设置
= 'arraybuffer';
("GET", url, true);
();
},
},
});
上面在设置图片存储路径的时候这样提到：
var md5Sign = require("signMd5").md5Sign;
let md5URL = md5Sign(url);
var filepath = dirpath + md5URL + '.jpg';
其中“ var md5Sign = require("signMd5").md5Sign;”也只是引入一个md5加密的脚本，意即给一串长的URL地址转为固定长短字符，这个MD5脚本我就不上传了，GitHub上面很多。伙伴们在测试的时候，上面这三行代码可以简写成:
var filepath = dirpath + url + '.jpg';
也就是直接使用url。
图片发自简书App