Vue+mui實現圖片的本地快取
效果:
const menu = {
state: {
products: {},
GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG']
},
mutations: {
get_product: function (state, products) {
//商品列表
state.products = products;
for(let i = 0; i < state.products.length; i++){
if(state.products[i]['image' ] != null){
// state.products[i]['image'] = state.GLOBAL_CONFIG['base64Header'] + state.products[i]['image'];
//下載圖片到本地
this.commit('imgCache',state.products[i]);
}else{
//新增預設圖片
state.products[i]['image'] = require ("../assets/file.png");
}
}
},
imgCache: function (state,imgObj) {
mui.plusReady(function(){
// 1. 轉換網路圖片地址為本地快取圖片路徑,判斷該圖片是否存在本地快取
// http://...jpg -> md5
// 快取目錄 _downloads/image/(md5).jpg
let image_url = imgObj.image;
let image_md5 = md5(image_url);
// 快取本地圖片url
let local_image_url = '_downloads/image/'+image_md5+'.jpg';
// 平臺絕對路徑
let absolute_image_path = plus.io.convertLocalFileSystemURL(local_image_url);
console.log(absolute_image_path);
// 判斷本地是否存在該檔案,存在就就直接使用,否則就下載
plus.io.resolveLocalFileSystemURL( absolute_image_path, function( entry ) {
if(entry){
imgObj.image = plus.io.convertLocalFileSystemURL(local_image_url);
}else{
download_img();
}
}, function ( e ) {
console.log("Resolve file URL failed: ");
download_img();
} );
function download_img(){
// filename:下載任務在本地儲存的檔案路徑
let download_task = plus.downloader.createDownload(image_url, {
filename: local_image_url
}, function(download, status) {
// 下載失敗,刪除本地臨時檔案
if(status != 200){
console.log('下載失敗,status'+status);
if(local_image_url != null){
plus.io.resolveLocalFileSystemURL(local_image_url, function(entry) {
entry.remove(function(entry) {
console.log("臨時檔案刪除成功" + local_image_url);
// 重新下載圖片
download_img();
}, function(e) {
console.log("臨時檔案刪除失敗" + local_image_url);
});
});
}
}else{
// 把下載成功的圖片顯示
// 將本地URL路徑轉換成平臺絕對路徑
console.log("下載成功" + local_image_url);
imgObj.image = plus.io.convertLocalFileSystemURL(local_image_url);
}
});
download_task.start();
}
});
}
},
actions: {
}
}
相關推薦
Vue+mui實現圖片的本地快取
效果: const menu = { state: { products: {}, GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] }, mutations: { get_p
iOS開發------實現圖片下載快取到本地
在開發過程中很多人都會使用SDWebImage來進行網路圖片的快取,說實話,這個第三方也確實好用,但依照本人的性格,還是一直在想做一版自己的本地快取,比如下載的圖片存到本地,下次再有相同的圖片需要載入,就不用再花冤枉流量來下載了,這次的嘗試雖然相比SDWebIm
vue中實現圖片全屏縮放預覽,支援移動端
# 安裝 npm install vue-photo-preview --save # 引入 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(pr
Java ConcurrentHashmap實現Localcache本地快取
很多場景下,有些請求的資料,是不會經常改變的,這種時候,為了減少資料庫的查詢壓力,可以將這一部分資料放入快取中,直接從快取中讀取。除了一些像Redis等快取外,還可以通過本地記憶體,作為快取。下邊將使用ConcurrentHashMap來實現本地快取。 >相關的技術:
vue-lazyload實現圖片懶載入的方式
1、安裝vue-lazyload npm install --save vue-lazyload 2、在main.js中引入並申明使用 (1)引入 import VueLazyload from 'vue-lazyload' (2)申明使用 Vue.use(Vue
vue-router 實現元件的快取之 keep-alive
版權宣告:本文為博主原創文章,未經博主允許不得轉載。 https://blog.csdn.net/qq_30114149/article/details/78415030 一、keep-alive簡介 keep-alive是Vue內建的一個元件,可以使
vue中實現圖片丶檔案上傳
html頁面 <input type="file" value="" id="file" @change='onUpload'>//注意不能帶括號 js程式碼 methods: {
針對單張大圖片本地快取,依賴於DClound平臺的H5+plus技術
需求 最近專案中遇到移動端首頁需要載入一些圖片,並且有些圖片很大並且更新不頻繁 原理 原理就是根據網路圖片的的url來判定本地是否存在該圖片,不存在就根據網路圖片的url下載該圖片,並把頁面上的圖片路徑替換成本地快取路徑;如果存在就直接使用本地圖片路徑。 準備 需要學習的
用Glide去實現圖片的快取和瀑布流
效果圖: 上面的加號和回收箱能實現載入一個圖片和刪除一個圖片,結合上一篇實現的圖片的載入用Glide實現圖片的快取,這次我們用RecyclerView來做,下面直接上程式碼,有問題留言大家一起探討… MainActivity程式碼: public
Vue.js實現圖片的隨意拖動
主要程式碼如下: <template> <div id="test_3"> <img src="../assets/img/photo.jpg
圖片本地快取
圖片懶載入是通過判斷http圖片檔案是否存在你的本地,如果未存在會將圖片快取到本地,如果已經存在就不做快取,使用到的技術md5加密,mui、html5+. 應客戶的要求,需要做懶載入,本人也找了一段時間才找到這個程式碼,因為是非同步載入的,為了配合mui,我添
vue + swiper 實現圖片輪播
export default { data () { return { timer: null, //定時器 mark: 0, //比對圖片索引的變數 imgArray: [//圖片路徑 require('../../assets/images
實現 Java 本地快取,該從這幾點開始
快取,我相信大家對它一定不陌生,在專案中,快取肯定是必不可少的。市面上有非常多的快取工具,比如 Redis、Guava Cache 或者 EHcache。對於這些工具,我想大家肯定都非常熟悉,所以今天我們不聊它們,我們來聊一聊如何實現本地快取。參考上面幾種工具,要實現一個較好的本地快取,平頭哥認為要從以下三個
Flutter 實現圖片快取到本地
網上可能有很多實現的外掛,有些動不動就上千行程式碼, 其實很簡單 只需要在原始碼的基礎上加一個本地快取就行, 畢竟原始碼是最可靠的 https://github.com/dikeboy/flutter-cache-image-local Flutter 自帶的有2個 圖片的Wid
IOS開發之非同步載入網路圖片並快取本地實現瀑布流(一)
</pre><pre name="code" class="objc"></pre><pre name="code" class="objc">在前面的一篇部落格中,我寫了一個瀑布流照片牆的程式,由於之前的程式載入的圖片是本
微信端調取相冊和攝像頭,實現圖片上傳,並上傳到本地服務器
配置 epic 替換 pan source 工具 alert 調試 family 在微信公眾號網頁開發時,遇到了圖片上傳的問題,查看了微信的開發者文檔,裏面的資料比較全。接著我們看一下整個的流程 1、config權限配置 $.ajax({ url:‘wx_getC
搞清Image加載事件(onload)、加載狀態(complete)後,實現圖片的本地預覽,並自適應於父元素內
斷圖 idt ont election href this 出現 alpha ole onload與complete介紹 complete只是HTMLImageElement對象的一個屬性,可以判斷圖片加載完成,不管圖片是不是有緩存;而onload則是這個Image對象的
Unity3d-WWW實現圖片資源顯示以及保存和本地加載
editor call clas amp private out .text sset bytes 本文固定連接:http://blog.csdn.net/u013108312/article/details/52712844 WWW實現圖片資源顯示以及保存和本地加
vue實現圖片路徑傳送
com nts rip lan height bin eve template image <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><t
vue實現圖片放大
script emit fun box () 實現 window 放大 msg <script> var Event = new Vue(); //組件A var A = { data: function() { return {