如何从HTML或Javascript访问Windows Phone和PhoneGap应用程序中的独立存储文件 [英] How to access isolated storage file from HTML or Javascript for Windows Phone and PhoneGap Application

问题描述

我正在使用PhoneGap为Windows，Android和iOS平台开发应用程序。



我有一个问题，需要你们的专家帮助。



我为Windows Phone创建了一个插件。插件基本上是从URL下载图像并存储在Downloads文件夹内的隔离存储文件夹中，这是成功的。



现在我的问题是有没有办法访问隔离的存储文件来自javascript。例如，我已经下载了一个图像并存储在独立存储（Download / logo.png）中，现在我必须将此图像设置为我的html图像源。

例如

 <   img     src   =  ms-appdata：///local/Downloads/logo.png   /  >  

但是无法获得成功。我已经尝试过几种方法但没有运气。



我使用以下代码将文件保存在独立存储中。

  //  此代码在保存时工作正常从url到隔离存储的映像 
 IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication（）; 
  //  创建目录（如果不存在） 
  if （ISF.DirectoryExists（IMAGE_FOLDER_PATH）==  false ）
 {
 Debug.WriteLine（ 目录创建）; 
 ISF.CreateDirectory（IMAGE_FOLDER_PATH）; 
} 
 
 WebClient客户端= 新 WebClient（）; 
  string  modeuleName = hamBurgerMenu [MODULENAME_COLUMN_INDEX]; 
 client.OpenReadCompleted + =（s，e）= >  
 {
  if （e.Error ==  null ）
 {
 Deployment.Current.Dispatcher.BeginInvoke（（）= >  
 {
 使用（ var  isoStore = IsolatedStorageFile.GetUserStoreForApplication（））
 {
  string  fullPath = Path.Combine（IMAGE_FOLDER_PATH，modeuleName +  。png）; 
  var  bi =  new  BitmapImage（）; 
 bi.SetSource（e.Result）; 
  var  wb =  new  WriteableBitmap（bi）; 
 使用（ var  isoFileStream = isoStore.CreateFile（fullPath））
 {
  var  width = wb.PixelWidth; 
  var  height = wb.PixelHeight; 
 Extensions.SaveJpeg（wb，isoFileStream，width，height， 0 ， 100 ）; 
} 
} 
}）; 
} 
}; 
 client.OpenReadAsync（ new  Uri（imageURL，UriKind.Absolute））; 
 

我尝试过以下解决方案，但根本无法取得成功。

 < span class =code-keyword><   img     src   =  file：/// C：| / Data / Users / DefApps / AppData / {9DB...0CC} /local/Downloads/logo.png  /  >  
 <   img     src   =  ms-appdata：/// local / Downloads / logo.png  /  >  
 <   img     SRC   =  ms-appx：///Downloads/logo.png  /  >  

您的评论或建议将受到高度赞赏！

谢谢&问候，

Imdadhusen

解决方案

Sunasara，我正在做与媒体捕获插件类似的事情，并得到照片uri（这样的事情） ：/CapturedImagesCache/WP_20150424_001.jpg）。该插件创建了一个名为CaptureddImagesCache的文件夹并将图片保存在那里。

然后我只需这样设置我的图像：



path = /CapturedImagesCache/WP_20150424_001.jpg;

var image = document.getElementById（'img1'）;

image.src = path;



您是否尝试过视频？



我绝望地让它工作......



谢谢

 function recordVideo（）{
 console.log（< span class =code-string>  recordVideo）; 
  //  开始视频捕获 
 flagMedia = '  v'; 
 navigator.device.capture.captureVideo（captureSuccess，captureError，{limit： 2 }）; 
} 
 
 
函数takePicture（）{
 flagMedia = '  p'; 
 console.log（  takePicture）; 
 navigator.device.capture.captureImage（captureSuccess，captureError，{limit： 2 }）; 
} 
 
< pre>  //  捕获回调 
  var  captureSuccess = function（mediaFiles）{
 
  var  i，路径
  for （i =  0 ，len = mediaFiles.length; i <  len; i + =  1 ）{
 path = mediaFiles [i] .fullPath; 
  //  使用该文件做一些有趣的事情 
} 
 
 
  switch （flagMedia）{
  case  '  a'：
 audioArray.push（path）; 
  break ; 
 
  case  '  v' ：
 videoArray.push（path）; 
 console.log（ 推送视频，路径： +路径）; 
  var  video = document.getElementById（'  idVideo'）; 
  var  pathVideo =   ms-resource： // +路径; 
 console.log（  pathVideo： + pathVideo）; 
 video.src = pathVideo; 
  break ; 
 
  case  '  p' ：
 fotoArray.push（path）; 
  var  image = document.getElementById（'  IMG1' ）; 
 console.log（  imageData： + path）; 
 image.src = path; 
 
  break ; 
 
 默认：
  break ; 
} 
 
}; 
 
  //  捕获错误回调 
  var  captureError = function（error）{
 navigator.notification.alert（' 错误代码：' + error.code， null ，' 捕获错误'）; 
}; 
 
 < /   pre   >  

视频中的
，我尝试使用路径，然后尝试使用某些uri架构，例如1. ms -app：//

2. ms-appdata：//

3. ms-resource：//

但没有运气。 ..

您好，



以下是我的解决方案：此解决方案仅适用于保存文件在提到的位置：



我将文件保存在

 ApplicationData.Current.LocalFolder; 

使用服务器代码并使用

 <   img     src   =  c：//data//users//defapps//logo.png    /  >  

C＃代码

  //  将下载的图像保存到应用程序的本地文件夹。 
  public   async 任务saveImage（流photoToSave，字符串 modeuleName，字符串 menuID， string  imageURL）
 {
 StorageFolder localFolder = ApplicationData.Current.LocalFolder; 
 StorageFile photoFile =  null ; 
 尝试 
 {
  string  ext = Path.GetExtension（imageURL 。修剪（））; 
 photoFile =  await  localFolder.CreateFileAsync（modeuleName + ext，CreationCollisionOption.ReplaceExisting）; 
 使用（ var  photoOutputStream =  await  photoFile.OpenStreamForWriteAsync（））
 {
  await  photoToSave.CopyToAsync（photoOutputStream）; 
 totalImagesToDownload--; 
  await  sendResponse（）; 
  //    -  Debug.WriteLine（----------- Image Downloaded ：+ modeuleName + ext）;  
} 
} 
  catch （例外e）
 { 
 totalImagesToDownload--; 
 Debug.WriteLine（e.Message）; 
} 
  //  返回photoFile.Path;  
} 

HTML代码

 <   img     src   =  c：//data//users//defapps//logo.png     /  >  

I am using PhoneGap to develop application for Windows, Android and iOS platform.

I have one problem and need expert assistance from you guys.

I have created one plugin for Windows Phone. Plugin is basically download images from URL and stored in isolated storage folder inside Downloads folder this is working successfully.

Now my problem is does there any way to access isolated storage files from javascript. for example i have downloaded one image and stored in isolated storage ("Download/logo.png) now i have to set this image to my html image source.
e.g.

<img src="ms-appdata:///local/Downloads/logo.png"/>

But couldn't get success. i have tried several way without luck.

I have using following code to save files in isolated storage.

//This code is working fine for saving image from url to isolated storage
IsolatedStorageFile ISF = IsolatedStorageFile.GetUserStoreForApplication();
//Create directory if does not exists
if (ISF.DirectoryExists(IMAGE_FOLDER_PATH) == false)
{
    Debug.WriteLine("Directory created");
    ISF.CreateDirectory(IMAGE_FOLDER_PATH);
}

WebClient client = new WebClient();
string modeuleName = hamBurgerMenu[MODULENAME_COLUMN_INDEX];
client.OpenReadCompleted += (s, e) =>
{
    if (e.Error == null)
    {
        Deployment.Current.Dispatcher.BeginInvoke(() =>
        {
            using (var isoStore = IsolatedStorageFile.GetUserStoreForApplication())
            {
                 string fullPath = Path.Combine(IMAGE_FOLDER_PATH, modeuleName + ".png");
                 var bi = new BitmapImage();
                 bi.SetSource(e.Result);
                 var wb = new WriteableBitmap(bi);
                 using (var isoFileStream = isoStore.CreateFile(fullPath))
                 {
                      var width = wb.PixelWidth;
                      var height = wb.PixelHeight;
                      Extensions.SaveJpeg(wb, isoFileStream, width, height, 0, 100);
                      }
                 }
             });
         }
     };
client.OpenReadAsync(new Uri(imageURL, UriKind.Absolute));

I have tried following solutions but couldn't get success at all.

<img src="file:///C:|/Data/Users/DefApps/AppData/{9DB. ..0CC}/local/Downloads/logo.png"/>
<img src="ms-appdata:///local/Downloads/logo.png"/>
<img src="ms-appx:///Downloads/logo.png"/>

Your comments or suggestion would be highly appreciated!
Thanks & Regards,
Imdadhusen

解决方案

Sunasara, I am doing something similar with the media-capture plugin and got the photo uri (something like this: /CapturedImagesCache/WP_20150424_001.jpg). the plugin creates a folder called CaptureddImagesCache and save the pic in there.
Then I simply set my image this way:

path = "/CapturedImagesCache/WP_20150424_001.jpg";
var image = document.getElementById('img1');
image.src = path;

Did you try with video as well?

I am desperated about making it work...

Thanks

function recordVideo() {
    console.log("recordVideo");
    // start video capture
    flagMedia = 'v';
    navigator.device.capture.captureVideo(captureSuccess, captureError, { limit: 2 });
}


function takePicture() {
    flagMedia = 'p';
    console.log("takePicture");
    navigator.device.capture.captureImage(captureSuccess, captureError, { limit: 2 });
}

<pre>// capture callback
var captureSuccess = function (mediaFiles) {
 
    var i, path, len;
    for (i = 0, len = mediaFiles.length; i < len; i += 1) {
        path = mediaFiles[i].fullPath;
        // do something interesting with the file       
    }
 

    switch (flagMedia) {
        case 'a':
            audioArray.push(path);
            break;

        case 'v':
            videoArray.push(path);
            console.log("pushed video, path: " + path);
            var video = document.getElementById('idVideo');
            var pathVideo = "ms-resource://" + path;
            console.log("pathVideo: " + pathVideo);
            video.src = pathVideo;
            break;

        case 'p':
             fotoArray.push(path);        
            var image = document.getElementById('img1');
            console.log("imageData: " + path);
            image.src = path;
 
            break;

        default:
        break;
    }

};

// capture error callback
var captureError = function (error) {
    navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
};

</pre>

in the video case, I tried with path and then with anteponing some uri schema such as 1. ms-app://
2. ms-appdata://
3. ms-resource://
but with no luck...

Hello,

Following are my solution: This solution will works only, when you save your file at mentioned location:

I am saving file at

ApplicationData.Current.LocalFolder;

using server code and displaying at client (browser) side using

<img src="c://data//users//defapps//logo.png" />

C# Code

// Save a downloaded images to the app’s local folder.
        public async Task saveImage(Stream photoToSave, string modeuleName, string menuID, string imageURL)
        {
            StorageFolder localFolder = ApplicationData.Current.LocalFolder; 
            StorageFile photoFile = null;
            try
            {
                string ext = Path.GetExtension(imageURL.Trim());
                photoFile = await localFolder.CreateFileAsync(modeuleName + ext, CreationCollisionOption.ReplaceExisting);
                using (var photoOutputStream = await photoFile.OpenStreamForWriteAsync())
                {
                    await photoToSave.CopyToAsync(photoOutputStream);
                    totalImagesToDownload--;
                    await sendResponse();
                    //--Debug.WriteLine("-----------Image Downloaded:" + modeuleName + ext);
                }
            }
            catch (Exception e)
            {
                totalImagesToDownload--;
                Debug.WriteLine(e.Message);
            }
            //return photoFile.Path;
        }

HTML Code

<img src="c://data//users//defapps//logo.png" />

这篇关于如何从HTML或Javascript访问Windows Phone和PhoneGap应用程序中的独立存储文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！