【原创博文，转载请注明出处！】
项目开发中加载远程服务器图片资源是基本需求之一。游戏中在线加载一张图片（比如玩家头像），想保存在本地，并为这张图片生成一个唯一ID或MD5，下次启动的时候，就可以从本地读取数据生成对应的精灵。在使用Cocos Creator开发游戏时，官方很友好地为我们提供了加载远程资源的API（如下），这几个API的好处在于根据URL从服务器加载图片后，本地也会有一份图片的存储，下次加载的时候，如果URL相同，则直接从本地加载。详情见官方👉 加载远程资源和设备资源
// 远程 url 带图片后缀名
var remoteUrl = "http://unknown.org/someres.png";
cc.loader.load(remoteUrl, function (err, texture) {
// Use texture to create sprite frame
});
// 远程 url 不带图片后缀名，此时必须指定远程图片文件的类型
remoteUrl = "http://unknown.org/emoji?id=124982374";
cc.loader.load({url: remoteUrl, type: 'png'}, function () {
// Use texture to create sprite frame
});
// 用绝对路径加载设备存储内的资源，比如相册
var absolutePath = "/dara/data/some/path/to/image.png"
cc.loader.load(absolutePath, function () {
// Use texture to create sprite frame
});
本来认为官方自带本地缓存的加载远程图片API已经很完美了。但是最近自己在使用时，发现服务器返回的图片URL并不如官方API限定的那样有后缀（.png or .jpg), 【"http://mapi1.93leju.net/home/userLogo.resource?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）。接下来我将分享出经过我封装之后的图片下载器文件 ImageLoader.js。
使用方法：
cc.vv = {};
cc.vv.imageLoader = require("ImageLoader");
cc.vv.imageLoader.imageLoadTool(imageURL,function(spriteFrame){
this.headSprite.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
*/
cc.Class({
extends: cc.Component,
statics : {
loadImage : function (url,callback){
cc.loader.load(url,function (err,tex) {
var spriteFrame = new cc.SpriteFrame(tex, cc.Rect(0, 0, tex.width, tex.height));
callback(spriteFrame);
});
},
imageLoadTool(url, callback){
var dirpath = jsb.fileUtils.getWritablePath() + 'customHeadImage/';
console.log("dirpath ->",dirpath);
var md5Sign = require("signMd5").md5Sign;
let md5URL = md5Sign(url);
var filepath = dirpath + md5URL + '.jpg';
console.log("filepath ->",filepath);
function loadEnd(){
cc.loader.load(filepath, function(err, tex){
if( err ){
cc.error(err);
}else{
var spriteFrame = new cc.SpriteFrame(tex);
if( spriteFrame ){
spriteFrame.retain();
callback(spriteFrame);
}
}
});
}
if( jsb.fileUtils.isFileExist(filepath) ){
cc.log('Remote is find' + filepath);
loadEnd();
return;
}
var saveFile = function(data){
if( typeof data !== 'undefined' ){
if( !jsb.fileUtils.isDirectoryExist(dirpath) ){
jsb.fileUtils.createDirectory(dirpath);
}else{
console.log("路径exist");
}
// new Uint8Array(data) writeDataToFile writeStringToFile
if( jsb.fileUtils.writeDataToFile( new Uint8Array(data) , filepath) ){
cc.log('Remote write file succeed.');
loadEnd();
}else{
cc.log('Remote write file failed.');
}
}else{
cc.log('Remote download file failed.');
}
};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
cc.log("xhr.readyState " +xhr.readyState);
cc.log("xhr.status " +xhr.status);
if (xhr.readyState === 4 ) {
if(xhr.status === 200){
//responseType一定要在外面设置
// xhr.responseType = 'arraybuffer';
saveFile(xhr.response);
}else{
saveFile(null);
}
}
}.bind(this);
//responseType一定要在外面设置
xhr.responseType = 'arraybuffer';
xhr.open("GET", url, true);
xhr.send();
},
},
});
上面👆在设置图片存储路径的时候这样提到：
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。
praise.jpeg
网友评论