3

I have a requirement in wp8, where the picture selected by the user needs to be shown in the browser. To browse and select the photo, I am using photo chooser task.

I am able to get the physical location of the selected image, but on passing the same to JavaScript from c# its not displaying the image.

On googling came across the following link How to access isolated storage file from HTML or Javascript for Windows Phone and PhoneGap Application But it did not solve my issue.

For reference, the location of the image I am using was:

C:\Data\Users\DefApps\AppData{FA586990-6E21-0130-BF9E-3C075409010C}\Local\sample_photo_00.jpg

This is my Javascript code:

function myPicture(data) {
    document.getElementById("capturedImage").src = data.imageUri;
    alert("data.imageUri   " + document.getElementById("capturedImage").src );
    var width = data.imageWidth;
    var height = data.imageHeight;

    alert("image width" + width );
    alert("image height" + height );
}

And this is my C# code:

StorageFolder localFolder = ApplicationData.Current.LocalFolder; 
string[] picList = Directory.GetFiles(localFolder.Path, "*.jpg");

foreach (string DeleteFile in picList) { 
    File.Delete(DeleteFile); 
}

StorageFile storageFile = await localFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
using (Stream outputStream = await storageFile.OpenStreamForWriteAsync())
{
    await file.CopyToAsync(outputStream);
}

send (storageFile.Path);

Now send function should add MyHTML in picture.

Community
  • 1
  • 1
Praveen Nagaraja
  • 31
  • 3
  • 1
    Welcome to Stack Overflow! There are some things wrong with your post - including the code formatting (see [editing help](http://stackoverflow.com/editing-help) for into); you have called a code sample "Java code", but it is Javascript (quite different) and I don't understand the bit starting "I tried the above" and ending "image source". That makes it hard to help you - to understand what you have done so far and what hasn't worked. Please make sure you've read [how to ask a good question](http://stackoverflow.com/help/how-to-ask) & try to edit your post so it gets more help. Good luck! – J Richard Snape Mar 13 '15 at 15:19
  • Sorry, my fault Let me rephrase the question, I have a requirement in wp8, where the picture selected by the user needs to be shown in the browser. To browse and select the photo, I am using photo chooser task, I am able to get the physical location of the selected image, on passing the same to JavaScript from c# its not displaying the image, On googling came across the following link http://stackoverflow.com/questions/26041220/how-to-access-isolated-storage-file-from-html-or-javascript-for-windows-phone-an/29032071#29032071 But it was of no help, thanks in advance – Praveen Nagaraja Mar 13 '15 at 15:53
  • OK - yes - that's much better. Use the [edit link](http://stackoverflow.com/posts/29034855/edit) to put all that into your question above the Javascript code(***replacing*** what's already there) and I think you will get better results (I'm not a C# expert, but there are lots here). Also - add the javascript and C# tags while you're editing to attract more specialist answers. – J Richard Snape Mar 13 '15 at 15:56
  • Just seen you've done that, but deleted the code. I advise put the code back and add the tags and then this will be a good question. – J Richard Snape Mar 13 '15 at 15:57
  • Thank you Richard for every thing. – Praveen Nagaraja Mar 14 '15 at 08:43
  • No problem - I hope someone comes along that can answer it for you (unfortunately I'm not an expert in this task). – J Richard Snape Mar 16 '15 at 12:33
  • "Now send function should add MyHTML in picture."? Maybe you mean "add picture to my html"? – Vado Jul 24 '15 at 22:57

1 Answers1

0

You can call JavaScript function from C# by WebBrowser.InvokeScript and send image in args parameter. But args is string(s), so you will have to encode your image to string using some algorithm... Base64 for example:

string ImageToBase64String(Image image)
{
    using (MemoryStream stream = new MemoryStream())
    {
        image.Save(stream, image.RawFormat);
        return Convert.ToBase64String(stream.ToArray());
    }
}

You will get some long string like this iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

On other side - in the JavaScript function you calling you will get that Base64 string and use it like this as src attribute of img element:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" />

More info about data uri scheme.

UPDATE: The easer solution. I think you can send your image path, width and height:

ImageProperties properties = await storageFile.Properties.GetImagePropertiesAsync();
webBrowser.InvokeScript("myPicture", storageFile.Path, (string)properties.Width, (string)properties.Height);

function myPicture(src, width, height) {
    document.getElementById("capturedImage").src = src;
    alert("data.imageUri   " + document.getElementById("capturedImage").src );

    alert("image width" + width );
    alert("image height" + height );
}
Vado
  • 134
  • 7