In WPF I'm using uri's as ImageSource for items in a list and it works fine except for url's thats is a .svg url.
I've tried using Svg. It works but the images are messed up and I had to download the file locally.
I also tried using SharpVectors didn't understand how to get it to work and got nowhere using the documentation.
This is my original code and it works for png, gif and jpg:
return new BitmapImage(new Uri(url, UriKind.Absolute));
If would also like to have a solution that does not require me to download files locally first but using Stream or the uri directly.
I can recommend CefSharp.Wpf for displaying SVG's images. It is chromium engine wrapped as WPF or Windows control.
I'm using it successfully to even play quite complex SVG animations.
This would give you possibility to show online image without downloading it.
For more details and samples please refer:
GitHub CefSharp
It is available as NuGet package. The only drawback might be memory footprint and necessity of maintaining browser engine process but beside this it is perfect.
Related
I have a large number of svg files (over 1000) that have keyframe animations included in the CSS. Ultimately I want to be able to display these in an android app.
I looked into using android vectordrawable among other solutions but that will only display the image from path data and wont be feasible to try add animations to every file.
I have have also tried converting to png using http://www.codeplex.com/svg in c#, again the png file does not include the animation.
You can use a Webview to display your svg.
here is a post that can help .svg file as object in HTML
Is there a way to display an SVG image (from a URL) in a xaml Image control in a UWP app
e.g.
<Image Source={Binding image_source}>
Where image_source is an absolute path to an image. Where the image is either png or svg format.
My solution works as expected with any common graphics format (jpg, png, gif) but displays nothing when the graphic is svg format.
I've seen loads of articles about converting the svg to something else, but the information comes from a web service that is not mine and use by others I would suspect. changing images on mass to png or something else I doubt would be an option.
In my application the Image is within a listView.
I've seen articles about converters and built in support for svg but none of them seem to work. I have yet to find any article here or anywhere with someone that has a working solution other than manually converting files (not an option)
Any help would be much appreciated.
UWP supports SVG natively and your solution should work. I guess the issue in your case is due to scaling. Make sure your graphics image has not scaled out of boundaries and you only see transparent part of it. You might try testing other SVG files to confirm that and play with size and SVG ViewBox attribute.
I am in need of converting a base64 encoded svg to a png and then returning it to the client to be rendered.
The idea is that I am drawing an svg on the client using d3.js and I need to convert it to png.
I tried taking the javascript root and writing the svg on the canvas and then converting it toDataUrl but IE has problems with this on all versions so this is not a viable option.
I have searched online a bit and all I could find is Inkscape.
This is not a viable solution for me because of limited access on the server and frankly I don't think it's a good idea to install an entire application for a simple functionality.
Is there any other solution that can take a base 64 encoded svg and return a png that can be displayed in an image?
I found that since I have to support IE 11 I instead went with canvas to blob to PNG using "canvas-toBlob.js" and "FileSaver.js"
$("#save-btn").click(function()
{
$("#myChart").get(0).toBlob(function(blob)
{
saveAs(blob, "chart_1.png");
});
});
https://jsfiddle.net/mfvmoy64/155
I am facing the same issue, however I been able to render the SVG into an image so your users could right click to download the image or right click on the canvas. There is also Canvg which has a library that appears to work with IE, however it is not accurate for complex SVG and so does not meet my needs. Perhaps it will help you.
I have code in my question that will work in IE, just use the IMG or Canvas object, you do not need to call toDataURI.
Checkout Canvg, it might be of help.
Good luck! If you find a better solution, please let me know. :-)
I am trying to work with TIFF images using C# in an ASP.NET environment. The catch, the images may have transparency, and any time I try to work with a transparent TIFF file I get either an Out of Memory Exception or Parameter is not valid error.
Here are the different ways I've gone about it:
string imagename = "Test.tif";
var image = Image.FromFile(#"C:\Path-to-File\" + imagename);
OR
Bitmap myBitmap = new Bitmap(#"C:\Path-to-File\" + imagename);
I've tried throwing it into a filestream and still receive errors. The TIFF files are coming from Photoshop, and I've definitely narrowed down transparency as the culprit.
This link does mention that the Image class does not support transparency
Looking for any sort of guidance...this shouldn't be as difficult as I'm finding.
Thanks to #Andrew Morton suggesting FreeImage, it ended up leading me to the Magick.NET library.
Ultimately FreeImage was near impossible to get to work in a C# program using current versions of Visual Studio, thus from some digging I found Magick.NET which after a quick search in NuGet, was very easy to install and get going.
Here is what I did:
Search for Magick in NuGet and select the desired architecture (x64 or x86)
Note: If selecting x64, the build settings for your project must be set to this same architecture otherwise you will get a failure such as:
Could not load file or assembly 'Magick.NET.DLL' or one of its dependencies. The specified module could not be found.
Familiarize yourself with the basics in this documentation
That's it! Here is the code I used to get it working:
using (MagickImage image = new MagickImage(#"C:\FolderPathToFile\OriginalFile.tif"))
{
image.Write(#"C:\FolderPathToFile\FinalOutput.png");
}
I currently have the zxing lib running on my silver-light project.
It's not lightning fast but it works fine and accurate.
However... the limitations are that some people use Linux and silver-light don't run very well (If at all) on some Linux platforms even with mono (moonlight)
So I'm trying to develop something that will decode bar-codes directly from an html5 page then send this information to my server by calling a service.
I am using c# at present.
I have the zxing jar files but have very little to no idea how to utilize them in an html5 page.
I have the webcam up and running using the html5 getUserMedia and can grab a frame from the stream and put it into a canvas, but can not work out how to integrate it with the zxing library.
Any and all help will be well appreciated.
There are a few native JS barcode scanning libraries out there that you could use:
http://badassjs.com/post/654334959/barcode-scanning-in-javascript
https://github.com/manuels/unix-toolbox.js-exact-image/
https://github.com/LazarSoft/jsqrcode
The last one is apparently a port of zxing, though it looks like it is tailored to QR code scanning.
I'm working on something similar. Trouble is, I've not gotten it to completely work either. But maybe this can help:
Like you, I've gotten an HTML5 webcam with a canvas to capture stills of the barcode. To use the ZXING stuff, you'll need to either compile the java files from source yourself, or get a pre-compiled .war file and find some way to host the servlets. I'm hosting mine using tomcat with the pre-compiled war pulled down from the maven repository (http://repo1.maven.org/maven2/com/google/zxing/zxingorg/2.2/) .
Once that's set, the ZXING decoding servlet is expecting either a URL or a file from an html form that has its action set to the url of your decode servlet. So you could take captured barcode on the canvas, save it to a file, and then have the user manually submit the file via the html page(exactly like the zxing.org web version) and that would work. However, if you wanted to seamlessly take the captured still and send it to the ZXING decoder, it's a bit more difficult and that's where I'm stuck as well.
I used javascript to convert the canvas's image to a blob first (and mind you, this only works in Firefox, since Chrome doesn't support canvas blobs yet. no idea about IE). Then I created a new FormData object, giving it the existing id of a form on the webpage, and appended the blob to that form. Then I used a submit button on the webpage to do the actual submitting of the form, which sends it via post to the decode servlet. I then get a nice white page with a console error about the character encoding of a plain text document not being declared.
I've also tried creating a new XMLHttpRequest in the javascript file, appending the canvas blob to that rather than an existing html form, and submitting via that. According to the console, that seems to get a bit farther (the console will show whether it redirected to a "results not found" page or to the results page), but I can't actually see/manipulate the output data.
Sorry I can't be of more assistance. I'd love to see someone get a completely web based version of this working since ZXING seems to be really good at the decoding process.