Cocos Creator远程图片的本地存储与加载

【原创博文,转载请注明出处!】
项目开发中加载远程服务器图片资源是基本需求之一。游戏中在线加载一张图片(比如玩家头像),想保存在本地,并为这张图片生成一个唯一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。

图片发自简书App

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,809评论 1 304
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,651评论 1 257
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 95,178评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,241评论 0 181
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 49,047评论 1 259
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,899评论 1 178
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,503评论 2 274
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,249评论 0 168
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,125评论 6 235
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,605评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,368评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,723评论 1 232
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,285评论 0 32
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,190评论 2 214
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,634评论 3 209
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,651评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,052评论 0 167
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,638评论 2 232
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,760评论 2 237

推荐阅读更多精彩内容