分享图片缓存的解决方案以及代码，欢迎拍砖！

Full

本帖最后由 Full 于 2016-3-9 16:13 编辑

接触了apicloud几天了，一直在瞎转，犹豫不决，是否采用，就当是随便学习一下吧。考虑到项目中会用到在线图片较多，一个必须解决的问题就是图片缓存。少说废话，正题
方案：首次加载时，从网络上下载，以后每次需要同样的图片就从本地缓存里直接取，有的模块听前辈们说有自动缓存，可以略过。
缓存在fs://images下面
用到 jquery,jquery.md5，没有这两文件的同学网上下载。
api框架下主要用到的就是fs模块，用到的api方法有:api.download
md5 主要是为了把图片的url编码成一个方便存的文件名，可以用别的方法。
过程是异步进行的，图片加载完一个，再下载下一个，所以首次加载时是一次加载显示的，后面基本上是感觉不到这个顺序。
此方法也可以用于其它资源的缓存，同时也可以考虑是否加密。

先上代码：

function _zyzImgCache(){
var imgDir = "fs://images/";
var srcs = $("img.imgCache");
if(srcs.length > 0){
var imgObj = $("img.imgCache").first();
var imgUrl = imgObj.attr("srcs");
var imgMd5 = $.md5(imgUrl);
var fs = api.require('fs');
fs.exist({
path: imgDir + imgMd5
},function(ret,err){
if(ret.exist){
imgObj.attr("src",api.fsDir+"/images/"+imgMd5);
imgObj.removeClass("imgCache");
_zyzImgCache();
}else {
api.download({
url : imgUrl,
savePath : imgDir+imgMd5,
report : false,
cache : true,
allowResume : true
}, function(ret, err) {
if (ret) {
imgObj.attr("src",ret.savePath);
imgObj.removeClass("imgCache");
_zyzImgCache();
} else {
var value = err.msg;
};
});
}
});
}
}

复制代码

如果引用呢：

<div><img src="" width="100" height="100" id="picture" class="abc imgCache" srcs="http://a.hiphotos**.**/image/w%3D400/sign=2abe1c77d4ca7bcb7d7bc62f8e086b3f/64380cd7912397ddf9f4bdb05a82b2b7d1a287f0.jpg"/></div>
<div><img src="" width="100" height="100" id="picture1" class="imgCache" srcs="http://www**.**/images/logo.gif"/></div>

复制代码

img 的标签加上 class="imgCache" img的url放在：srcs 上面
在ajax加载完html数据后直接执行函数就可以了。 _zyzImgCache()

好了，如果大家有更好的建议，一起完善。

袁小溅

本帖最后由袁小溅于 2016-7-6 12:13 编辑

function IMGcache() {
var imgDir = "fs://images/";
var srcs = $("img.imgCache");
if (srcs.length > 0) {
var imgObj = $("img.imgCache").first();
var imgUrl = imgObj.attr("srcs");
var imgSha1 = hex_sha1(imgUrl);
if ($api.getStorage("imgcache" + imgSha1) == undefined) {
api.download({
url : imgUrl,
savePath : imgDir + imgSha1 + '.png',
cache : false,
allowResume : true
}, function(ret, err) {
if (ret.state == 1) {
var trans = api.require('trans');
trans.decodeImgToBase64({
imgPath : ret.savePath
}, function(ret1, err1) {
if (ret1.status) {
imgObj.attr("src", "data:image/png;base64," + ret1.base64Str);
imgObj.removeClass("imgCache");
$api.setStorage("imgcache" + imgSha1, "data:image/png;base64," + ret1.base64Str);
IMGcache();
} else {
api.alert({
msg : err1.msg
});
}
});
} else {
IMGcache();
}
});
} else {
imgObj.attr("src", $api.getStorage("imgcache" + imgSha1));
imgObj.removeClass("imgCache");
IMGcache();
}
}
}

复制代码

APICLOUD用到的模块：trans 、 fs

楼主的方法其实和系统自带的api.imageCache一样，都是在本地存了个缓存文件，没有后缀，我遇到个问题就是直接调用，src显示不出图片，所以我改编了下，本地存了base64格式，这就通用所有机型了，方法见附的代码，引用和楼主的一样，img 的标签加上 class="imgCache"

aTiger

好用，

aTiger

好用，

让爱永恒

用楼主这个方法改了一个加载序列图片的，好用！谢谢分享

馄饨馅饼

让爱永恒发表于 2016-6-22 14:56
用楼主这个方法改了一个加载序列图片的，好用！谢谢分享

我这个用他的方法为什么每次还是重新加载什么情况啊

让爱永恒

馄饨馅饼发表于 2016-8-2 10:29
我这个用他的方法为什么每次还是重新加载什么情况啊

你最好把代码贴出来，让大拿们给瞅瞅

馄饨馅饼

//第六步图片缓存
function IMGcache() {
var imgDir = "fs://images/"; //fs模块

var srcs = $("img.imgCache");
if (srcs.length > 0) {
      var imgObj = $("img.imgCache").first();

      var imgUrl = imgObj.attr("srcs");
      alert(imgUrl);
      var imgSha1 = hex_sha1(imgUrl);
      if ($api.getStorage("imgcache" + imgSha1) == undefined) {
         api.download({
            url : imgUrl,
            savePath : imgDir + imgSha1 + '.png',
            cache : false,
            allowResume : true
         }, function(ret, err) {
            if (ret.state == 1) {
                  var trans = api.require('trans');
                  trans.decodeImgToBase64({
                     imgPath : ret.savePath
                  }, function(ret1, err1) {
                     if (ret1.status) {
                        imgObj.attr("src", "data:image/png;base64," + ret1.base64Str);
                        imgObj.removeClass("imgCache");
                        $api.setStorage("imgcache" + imgSha1, "data:image/png;base64," + ret1.base64Str);
                        IMGcache();
                     } else {
                        api.alert({
                              msg : err1.msg
                        });
                     }
                  });

            } else {
                  IMGcache();
            }
         });
      } else {
         imgObj.attr("src", $api.getStorage("imgcache" + imgSha1));
         imgObj.removeClass("imgCache");
            IMGcache();
         }
      }
}

馄饨馅饼

下面的图是我在手机端页面上显示的上面是他的代码我要怎么结合上啊现在脑袋全是浆糊里求大神帮忙解决一下吧拜托拜托

袁小溅 · 回复于2016-11-28 10:52:34

馄饨馅饼发表于 2016-8-2 11:08
下面的图是我在手机端页面上显示的上面是他的代码我要怎么结合上啊现在脑袋全是浆糊里求大神帮忙 ...

引用trans 、 fs模块，然后<img class="imgCache" srcs=""+_DOMIN_+"">
只要在img标签上加上class="imgCache"，src换成srcs。你的drawList方法最后再调用下IMGcache() ;

[开发工具] 分享 图片缓存的解决方案以及代码，欢迎拍砖！

[开发工具] 分享图片缓存的解决方案以及代码，欢迎拍砖！