1. 程式人生 > >Weex 載入 .xcassets 中的圖片資源

Weex 載入 .xcassets 中的圖片資源

背景

因為 .xcassets 中的圖片資源只能通過 imageNamed: 方法載入,所以需要做一些特殊處理,才能提供給 Weex 使用(PS:純屬娛樂,因為 Weex 跨平臺的特性,這種針對某一端做實現的方案實用價值並不大)。

方案

觀察 WeexSDK 發現有 WXImgLoaderProtocol 這個協議,這個協議包含了下面的方法:

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary
*)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock;

從名字就可以看出來,這個方法宣告的功能就是通過指定的 URL 下載圖片並返回一個 UIImage 物件。

下載過 WeexDemo 的人應該都知道里面有一個叫 WXImgLoaderDefaultImpl 的類(PS:別告訴我你對 Weex 感興趣確連 WeexDemo 裡面有啥都不知道)。這個類實現了 WXImgLoaderProtocol 協議,內容如下:

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString
*)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock { if ([url hasPrefix:@"//"]) { url = [@"http:" stringByAppendingString:url]; } return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL
URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) { } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) { if (completedBlock) { completedBlock(image, error, finished); } }]; }

其實就是利用 SDWebImage 這個庫實現圖片下載功能。而且我還發現,如果不實現 WXImgLoaderProtocol 協議,就無法在 Weex 的程式碼中通過 URL 載入網路圖片。也就是說 Weex 其實是依賴原生來做網路圖片載入,至於為什麼這麼做,我只能說:我不知道。��

然後 WeexDemo 通過下面的程式碼把 WXImgLoaderDefaultImpl 註冊為 Weex 的一個 iOS 原生 handler


[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];

這樣我們就可以在 Weex 中載入網路圖片了,比如:

<image class="img" style="width: 68px; height: 68px;margin-left:20px;" src="https://gw.alicdn.com/tps/TB1El.mKXXXXXXyapXXXXXXXXXX-34-34.gif"></image>

好了,現在就來說說怎麼載入 .xcassets 中的圖片資源,其實很簡單,在 WXImgLoaderDefaultImpl 實現的方法中新增幾行程式碼就可以:

if ([url hasPrefix:@"xcassets:"]) {
    UIImage *image = [UIImage imageNamed:[url substringFromIndex:9]];
    completedBlock(image, nil, YES);

    return [WXXCassetsLoaderOperation new];
}

這裡我定義的規則是:xcassets:+[.xcassets 中的圖片名]。所以我們判斷 url 是不是以 xcassets: 開頭,如果是,通過 imageNamed 方法載入圖片並返回即可。

因為 downloadImageWithURL 方法要求返回遵循 WXImageOperationProtocol 協議的物件,所以我們新建一個 WXXCassetsLoaderOperation 類,然後實現 WXImageOperationProtocol 協議中的 cancel 方法:

- (void)cancel {
}

然後我們就可以在 Weex 中載入 .xcassets 中的圖片了。程式碼如下:

<image class="img" style="width: 300px; height: 300px;" src="xcassets:reload"></image>

相關推薦

Weex 載入 .xcassets 圖片資源

背景 因為 .xcassets 中的圖片資源只能通過 imageNamed: 方法載入,所以需要做一些特殊處理,才能提供給 Weex 使用(PS:純屬娛樂,因為 Weex 跨平臺的特性,這種針對某一端做實現的方案實用價值並不大)。 方案 觀察 Weex

載入+監聽圖片資源載入製作進度條

這兩天遇到一個新需求:一個一鏡到底的h5動畫。因為功能的特殊性,就要求我們提前監聽頁面的靜態圖片是否全部載入完畢。即處理預載入。 總結下來,下次這種需求需要提前注意以下幾點: 一、圖片而不是背景圖 本來,我所用到的圖都是用背景圖製作的(因為非介面返回的圖片都要求用背景圖)。 但是監聽靜態圖片時,後

載入 Bundle 圖片的三種方法

第一種方法 NSString *path = [[NSBundle mainBundle] pathForResource:@"myBundle" ofType:@"bundle"]; NSBun

UIWebview 載入本地html圖片資源無法正常載入的問題

今天在做webview載入本地html的時候遇到一個問題,本地html中含有圖片資源,用瀏覽器直接正常載入html,但是UIWebview在載入的時候圖片找不到,懷疑是圖片路徑問題,於是查了好多資料,

關於Android studio 圖片資源存在 執行時卻找不到

今天碰到了一個比較無奈的 問題,圖片資源明明存在 程式碼編寫時 沒有錯誤報出。然而 當程式跑起來的時候,卻報出 android.content.res.Resources$NotFoundException: Resource ID #0x7f060062 研究好長時間,發現

weex 載入三端(android ios web) 本地圖片 解決(專案已實踐)

  本文講解內容為weex載入三端本地圖片,所寫解決方案均已驗證,使用sdk版本為0.18.0,其他版本不能保證可行。   weex載入圖片方式有三種,1.src直接引用base64編碼,2.載入網路圖片,3.載入本地圖片(三端分別放在專案目錄)。前兩種都是比較簡單直接,第三種相對初

weex載入三端本地圖片解決(專案已實踐)

  本文講解內容為weex載入三端本地圖片,所寫解決方案均已驗證,使用sdk版本為0.18.0,其他版本不能保證可行。   weex載入圖片方式有三種,1.src直接引用base64編碼,2.載入網路圖

CBitmap程式動態載入 本地檔案上的BMP圖片資源

 HBITMAP   bitmap; BITMAP    bm; bmBkgnd.Detach(); bitmap = (HBITMAP)::LoadImage(NULL,strPath, IMAGE_BITMAP, 0, 0, LR_CREATEDIBSECTION|LR_LOADFROMFILE|LR_D

Images.xcassets 載入圖片資源的方法

一般載入圖片資源使用的是兩種方式,一種是直接用UIImage imagedNamed 來載入。長這個樣子。 [UIImage imageNamed:imageName] 這種載入的方式是會快取圖片

cocos2dx載入圖片資源的方法,和從記憶體獲取已經載入圖片資源的方法 以及釋放問題

遊戲中通常需要將常用的資源如:聲音,圖片,plist檔案,提前載入進記憶體,以加快遊戲的流暢度 1.預載入聲音: SimpleAudioEngine::getInstance()->preloadBackgroundMusic("boom.mp3"); 載入之後就可以

Java將圖片資源以二進制的形式保存到Sqlserver數據庫

賦值 sets table date image arc 轉換成 ret ros 如何使用Java語言將圖片資源以二進制的形式保存的數據庫中 在sqlserver中創建表 use MyDb1gocreate table SaveImg(id varchar(10) pr

解壓Assets.car獲取App圖片資源

一個 git 源代碼 .com 技術分享 tps 生成 ets http iOS開發時圖片資源(png)是放置在Images.xcassets文件夾中進行管理的。 項目歸檔後就是ipa文件,在ipa文件中,Images.xcassets文件夾的內容放置在了Assets.ca

WWW實現圖片資源顯示以及儲存和本地載入

WWW實現圖片資源顯示以及儲存和本地載入 using UnityEngine; using System.Collections; using System.IO; using UnityEditor; enum GetPicType { DownLoad = 0, Local

iOS 如何計算圖片載入記憶體所佔的大小

首先圖片自動縮放到2的n次方大小,例如200 * 300畫素 會變成256 * 512大小。 圖片記憶體大小的計算公式 寬度 * 高度 * bytesPerPixel/8。 bytesPerPixel : 每個畫素所佔的位元組數。 RGB顏色空間下 每個顏色分量由8位組成

Android獲取圖片資源之 拍照後在程式顯示照片

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

QT 新增資源圖片

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

網頁圖片載入的原理

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

Android載入圖片資源的幾種方式

1. 圖片放在sdcard中,   Bitmap imageBitmap = BitmapFactory.decodeFile(path) (path 是圖片的路徑,跟目錄是/sdcard)     2. 圖片在專案的res資料夾下面   //得到applicat

2. springboot專案載入linux圖片 (利用tomcat虛擬目錄) (可用)

1.  springboot專案埠 8080      ( linux80埠 指向 8080, 直接ip就可訪問專案 ) 2.  linux上的tomcat埠 8081 , 設定server.xml配置虛擬目錄 jia 指向 /

Android具有動畫效果的圖片資源

在一些場景下,圖片需要具有動畫效果。當你想顯示一個由多張圖片組成的loading動畫,或者一個圖示切換過程,就需要到具有動畫效果的圖片了。Android提供了幾種方式實現動畫圖片。 下面的是個示例: 第一種方式是使用Animation Drawable,這是通過建立多張靜態