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. :-)
Related
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.
Is there a library that would help to convert GDI+ GraphicsPath to HTML5 canvas Path? Or do I have to manually run through all GraphicsPath.PathPoints and GraphicsPath.PathTypes to emit corresponding HTML5 code (if so please share any hints)?
Unfortunately I couldn't find anything useful. Some people suggested using SVG as a way to "transport" curves from GDI to Canvas, but I couldn't find any decent SVG library for .NET. It took me quite some time to understand how the data inside GraphicsPath is stored because it is not as straightforward as you might think. This is what I've came up to.
Knowing how GraphicsPath actually work I've managed to recreate it using bunch of HTML5 functions: .moveTo(), .lineTo() and .bezierCurveTo(). The result was pretty neat although final string building takes some time and resulting JS files sometimes contain tenths of thousands lines of code if source GraphicsPath represents long text written with fancy font. Surprisingly Firefox handles them without problems.
I won't paste the code that I'm using as it is nothing special as long as you read and understand my answer from another SO question.
I have a DIV container which has some text, background-image, image. I need to convert that whole DIV contents into image and save.
I have googled it around but could not find the perfect answer. some are giving answers that uses a windows application , but i need it on a web platform .
any help will be highly appreciated
From what I understood, you have to do that in the client side, so you should take a look at the toDataURL method of the canvas.
If you don't know, the canvas support text and image.
Example and little library at this link:
http://www.nihilogic.dk/labs/canvas2image/
http://html2canvas.hertzen.com/
Does't support IE though. Looks solid other than that.
This is possible, with modification to the code here http://html2canvas.hertzen.com/screenshots.html you could perform the required screenshot :)
I need to work on a new feature where a user can make a screenshot of the content in the browser via asp.net page and save it automatically as jpeg. Is there a example or someone can give me some idea how I can do that?
I will really appreciate.
Thanks in advance, Lazile
The long and short of it is that you'll need to render the page on the server and take a picture of it. Depending on your format needs, there are a variety of ways to do this.
Here's a link to a tutorial for getting a snapshot in jpg, bmp, png, etc.
If you need to get it to pdf format, I would recommend either using a program like wkhtmltopdf, or using the information from the tutorial and then pasting that image into a pdf.
check this out. It's javascript on the client side. It might meet your needs with some tweaking.
Edit: caveat is that it doesn't work in <IE9 as it uses HTML 5 canvas.
I have been trying to create a decoder that will stream through a pcx file and display it on screen as a bitmap. I have managed to get the information from the image header by using a binary reader, but I have now reached the part that seems to take the least amount of code, yet is also the hardest: creating an array of pixels.
I understand that i may need to add two embeddded for loops to process the data. I have looked at some C and C++ examples, but struggle to understand them. I also need to get the array to display it. if you need more code then I will share it.
I have searched far and wide and read the spec, but I don't know how to approach this. If anyone could help me, I would be very grateful.
Regards.
The .NET does not support PCX images natively, you have two choices. Read the specification and decode the image by yourself or use some library.
As suggested on bytes.com you can use Dot Net Fireball (a Free Image wrapper) and load the image like this:
Fireball.Drawing.FreeImage freeImage = new FreeImage(#"c:\test.pcx");
Image image = freeImage.GetBitmap();
http://magick.codeplex.com/
a nice wrapper working with http://imagemagick.codeplex.com/
easy to setup and get going, see samples at the bottom of the page here:
http://magick.codeplex.com/documentation