I need to write the code which will load some HTML (received from external source by other means) into WebView and display images referenced in this HTML. These images will be stored locally somewhere in Windows.Storage.ApplicationData.Current.LocalFolder.
Neither of suggestions at use local image to display in webview for windows phone 8.1 or Use local images in Webbrowser control work for me. If I load such HTML with web.NavigateToString(html):
<html><head></head><body>A <img src="file:///c:/Users/idh/AppData/Local/Packages/d783af9f-88eb-42f5-ab0f-abb025f32baa_5cy2zb9g43kb2/LocalState/folder/image001.jpg"> B</body></html>
I get just A B displayed. I tried slashes and backslashes, double and triple slashes after file:, ms-appx: and relative paths instead of file:, etc. The image never gets displayed. At the same time, if I save this in HTML file and open it outside of my app, it's displayed fine. I also successfully save and read these files (they are actually appeared in that folder because my app created them so unauthorized access is not an issue). package.manifest does include Private networks.
I'd better not use embedding with base64, custom uri resolver and other special techniques because I'm not the actual developer of the application. I make a library which gets HTML and saves images to local storage and now I need to demonstrate an easy to use method to visualize the stored content in WebView like I earlier did for normal .NET framework. I.e. I'm actually writing a sample for developers who are users of my library and these folks will then use my sample to deal with this HTML and images.
As the last resort, I can end up writing base64 or custom resolver for UWP version of my sample (while for other platforms like normal .NET framework the same procedure is much easier). But I want to at least be sure that the direct route of selecting proper URLs for images in the source HTML is not possible and I won't end up with situation where I wrote some quite complicated stuff and then someone experienced in UWP apps reveals that I over-engineered things. I.e. some expert opinion "no, it's not possible in UWP and you MUST use base64 embedding or custom URI resolving" will work for me too.
Although NavigateToString supports content with references to external files such as CSS, scripts, images, and fonts. But it only supports content in the app package using the ms-appx-web scheme, and web content using the http and https URI schemes. It can't work with assets located in the apps local folder. So using file:///, ms-appdata:/// or ms-appx:/// scheme won't work here.
To achieve what you want, you can use Base64 encoded images or custom URI resolver. Also I think you can store the html string to a file under the same subfolder that stores these image assets. In the html, you can use relative URI to reference these assets like what in my previous answer. And then use the Navigate method with a Uri that uses the ms-appdata scheme. For example:
var html = "<html><head></head><body>A <img src=\"image001.jpg\"> B</body></html>";
var folder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("folder", CreationCollisionOption.OpenIfExists);
var file = await folder.CreateFileAsync("html.html", CreationCollisionOption.OpenIfExists);
await FileIO.WriteTextAsync(file, html);
webView.Navigate(new Uri("ms-appdata:///local/folder/html.html"));
Related
Is there any library in Xamarin which would store the pages that we browse in WKWebView?
Have to store the resources of the pages (CSS, fonts, js etc.) for offline viewing. The complexity is maintaining the folder structure and manage the resource Urls within the CSS and JS files. Any idea how the resources can be stored and loaded?
There are resources on how to save a html page and load the html in WKWebView.
Please note that this question is not about that. It is more about storing and managing the resources of the visited pages for offline viewing.
I don't think you're going to get your answer with a mobile only approach. It's not impossible to create one but I don't believe anything exists that will do what you want, happy to be proven wrong. I think you need to think outside the square a bit.
I can't give you the entire set of code because I don't own it (my company does) but I managed to take a website completely offline (with limitations of course) by using multiple resources to achieve the desired outcome.
I used a piece of software called Cyotek WebCopy in an Azure VM to scrape all of the website down to a folder. That folder was then zipped up and uploaded to Azure Blob Storage so it could be accessed from anywhere. The Xamarin app would then access the storage container, retrieve all of the blobs and then when a user clicks on a specific blob, it unzips down to the device and then opens up in a web view for the user to browse.
All of this was achieved using a web service and PowerShell scripts on the VM side and then of course your standard Xamarin based application for viewing.
Like I said, there are limitations to this but barring external links and database calls (like a submission page), it will work for you. It has worked for us.
It may sound like a lot of work but all in all, the VM side took me about 2 days and the Xamarin concept about 5 so all in all, not long to stand something up that is able to be built upon. I hope that helps.
I got an issu with the plugin IronPDF. I'm trying to render HTML and CSS display to a PDF files, it work in our web application, but now I'm trying to do the same stuff with a windows service. I tried to use Bootstrap locally to get CSS, that didn't work so I used CDN link and it worked. But now, I would like to use pictures, so I pasted a folder in the root of the project with pictures in it, I think it's an application root problem (Ibelieved that the application root was the root of the project, but it seems to be wrong)
I would like to have something like this:
https://prnt.sc/gvzvpg
but instead, I have something like that :
http://prntscr.com/gvzw1r
thanks for attention
I used before ItexSharp for generating PDF files with c#. For images, the path must be relative path. try it
I have an html file (which consists of both text and images) in my Documents library (it need not exactly be over there, what I mean to emphasize is - it's not in the internet and not included within the app package since it's dynamic content and created after the app has been deployed).
I want to display the contents of this page within a WebView. How would I go about doing that ?
You can (and should) copy your HTML Files to the LocalState Directory of your App which sits here: C:\Users\YourUSerName\AppData\Local\Packages\YourApp\LocalState.
You then can Access this with: ms-appdata:///local/
Very Basic example:
string url = "ms-appdata:///local/myWebpage.html";
webView.Navigate(new Uri(url));
You can find a lot of Information and samples in this sample download: https://code.msdn.microsoft.com/windowsapps/XAML-WebView-control-sample-58ad63f7
Is it possible to derive a location path of an in-memory file?
My justification for doing this is based on having a collection of images that are retrieved by my WinForms application in a Base64 encoded string format. I need to build up some HTML and inject these images so that they can be rendered on an embedded page in a WebBrowser control on my application. Since we're talking about HTML here, I need to use the <IMG> tag to display the image. This element needs to accept a "src" path which means I need to determine a method of deriving an absolute/relative path to each of the in-memory images.
If you control the application running on the server (which you indicated in a comment), then you should be able to redirect requests for particular resources. For example, if the user application requests "http://myserver/memory/imgxxx.jpg", the server should be able to intercept that and, rather than try to serve imgxxx.jpg from disk, construct an image from the data in memory, and ship it down to the client.
Now, if you're just shipping the base64 encoded data to the client, and want the client to somehow access the data and do the conversion ... that's a harder problem. I can envision doing something with JavaScript to replace all of the img tags that have some given attributes with the corresponding image. But I suspect that'd get pretty messy. If it's even possible.
Another possibility is to create a derived WebBrowser component and customize its behavior. A good example is in the CreateSink method documentation. It might be possible to write a handler that is called whenever the component wants to download something. You could then intercept the call and supply your in-memory image. I'm not certain that this is possible. You might take a look at WebBrowser customization. I will say, though, that it's probably easier to just write the files and use a "file://" url.
You can build a light weight HTTP server into your application by using the HttpListener class.
You will want to use the asynchronous model. Create a url that it serves content to, such as "http://*:8080/appdata", and then use that url within your html (http://localhost:8080/appdata/someinmemoryresource").
When theHttpListener receives a request, look at the path and respond with whatever in memory data it is you want to serve!
The IMG tag does not need a path, it needs a URL. You cannot reference in-memory data with a URL. The browser is going to issue a second HTTP request with the URL provided in the IMG tag and that URL must be valid at this point.
Consider adding an MVC action or an HTTP handler to return the image bytes. Or save it to disk.
How can I get Picture Previews to work with IE 8 and up?
Can I get binary image data from an input type "file", with JavaScript/jQuery?
If I can just get the data (in the right format) back to the server, I should be able to work with it there, and then return it with AJAX (although, I am absolutely no AJAX expert).
There is, according to the research that I have done, NO WAY to get picture previews in all IE versions using only javascript (this is because getting the full file path is seen, by them, as a potential security risk). I could ask my users to add the site to the trusted sites, but you don't usually ask users to tamper with those kinds of low-level settings (not to mention the quickest way to make your site seem suspicious to users is to ask them to directly add your site to the trusted sites list. That's like sending an email and asking for a password. "Just trust me! I'm soooo safe!" :)
I have picture previews working in everything except IE and have no problem using conditional comments to separate an IE specific way of doing this from the way I am doing it with other browsers. In other words, the answer doesn't even have to be cross-browser, just cross-IE (8 and 9). I know I have seen IE sites use picture previews before (somehow), so I know there must be at least ONE way to do this...
So if you need to support IE lower than 10 you could upload the file to the server using some of the existing AJAX upload components (Uploadify, Plupload, Valums AJAX Upload, Bleuimp, ...), generate and store a thumbnail on the server and send the url to the saved image to the client using JSON so that it could display it using an tag. Actually since IE supports Data URI Scheme you don't need to store the uploaded file to the server in order to generate the preview. You could directly return the resulting thumbnail image from your Preview controller action formatted as Data URI Scheme so that you could show it on the client.
Another solution if you don't have the time and resources to implement this functionality is to simply tell your users that if they want to get a realtime preview of the image that they should consider using a different web browser because your site doesn't support IE for this.