PhoneGap：將圖像從畫布保存到本地圖像庫？

Question

我有一個在Android/iOS上運行的PhoneGap/Cordova應用程序。該應用程序在HTML5畫布元素中創建圖像。此畫布在瀏覽器中導出爲圖像。

如何將瀏覽器中生成的圖像保存到Android/iOS本地圖像庫？

Answer 1

請嘗試使用iOS Canvas2ImagePlugin的自定義插件。這將從手機圖像傳遞到本地（目標C）。要保存圖像到相冊

在iOS項目中添加2個文件SaveToPhotoAlbum.h和SaveToPhotoAlbum.m

SaveToPhotoAlbum.h

#import <Foundation/Foundation.h> 
#import <Cordova/CDVPlugin.h> 


@interface SaveToPhotoAlbum : CDVPlugin { 
} 

- (void) saveToPhotoAlbum:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options; 

@end 

SaveToPhotoAlbum.m

#import "SaveToPhotoAlbum.h" 

@implementation SaveToPhotoAlbum 

- (void) saveToPhotoAlbum:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options { 
    NSString* callbackId = [arguments pop]; 
    NSString* path = [arguments objectAtIndex:0]; 

    path = [(NSString *)path stringByReplacingOccurrencesOfString:@"+" withString:@" "]; 
    path = [path stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; 
    path = [path stringByReplacingOccurrencesOfString:@"file://" withString:@""]; 

    UIImage *image = [[[UIImage alloc] initWithContentsOfFile:path] autorelease]; 

    //Now it will do this for each photo in the array 
    UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil); 

    CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK]; 
    [self writeJavascript: [pluginResult toSuccessCallbackString:callbackId]]; 
} 

@end 

saveToPhotoAlbum.js

(function(cordova) { 

/** 
* Constructor 
*/ 
function SaveToPhotoAlbum() {} 


SaveToPhotoAlbum.prototype.saveToPhotoAlbum = function(successCallback, failCallback, uri) { 
    console.log('SaveToPhotoAlbum.js: saveToPhotoAlbum: uri:' + uri); 
    if (!uri) { 
     if (typeof failCallback === 'function') { 
      failCallback('uri not provided'); 
     } 
     return; 
    } 

    cordova.exec(
     successCallback, 
     failCallback, 
     "SaveToPhotoAlbum", 
     "saveToPhotoAlbum", 
     [uri] 
    ); 
}; 

/** 
* Install function 
*/ 
SaveToPhotoAlbum.install = function() { 
    if (!window.plugins) { 
     window.plugins = {}; 
    } 
    if (!window.plugins.SaveToPhotoAlbum) { 
     window.plugins.SaveToPhotoAlbum = new SaveToPhotoAlbum(); 
    } 
}; 

/** 
* Add to Cordova constructor 
*/ 
if (cordova && cordova.addConstructor) { 
    cordova.addConstructor(SaveToPhotoAlbum.install); 
} else { 
    console.log("SaveToPhotoAlbum Cordova Plugin could not be installed."); 
    return null; 
} 

})(window.PhoneGap || window.Cordova || window.cordova); 

，並在你的HTML文件作爲來電：

var imageSource = $('#widgetScreen_widgetContainer [name="mobileimage_66"]')[0].src; 
      window.plugins.SaveToPhotoAlbum.saveToPhotoAlbum(photoSuccess, photoFail, imageSource);