I am creating an ASP.NET web application. In one of my webpages (an ASCX control) I am placing a fusion chart inside a <div> tag. I want to provide an option for the client to download this fusion chart.
Is there any way that I can download
the fusion chart present in the Div
tag, as an image (Using javascript
because the div tag is a client side
control).
The request is that my client could save this fusion chart present in the <div> tag as an image when he visits the webpage.
The target browser is IE.
Please help me.
I can confirm that it is not possible to 'Export the chart as image' when using FusionCharts Free. However, as mentioned by Larsenal, you will be able to use FusionCharts v3.2.1 and it's updated JavaScript API to export pure JavaScript charts to JPEG, PNG, PDF, SVG formats.
Ref.- http://www.fusioncharts.com/docs/?ECPureJS.html
Furthermore, you may even export your Flash charts, if required, in a similar manner. DO check out the link below for a more detailed account of the same.
Ref.- http://www.fusioncharts.com/docs/?ECOverview.html
Hope this helps.
It is currently not possible to generate an image from a section of a webpage with JavaScript. Quoting myself from another question:
Firefox added something similar to
this to their canvas implementation.
You can find
CanvasRenderingContext2D.drawWindow()
documented in their wiki. It is
restricted to being used by plugins,
for security purposes, and isn't
supported by any other browsers.
There is
talk
of adding support to other browsers,
and perhaps removing some of the
security restrictions, but that is
probably a long way off. For now,
there isn't a good JavaScript solution
to your problem.
Sorry, there's no way to do it with Javascript.
I don't know about the Fusion controls, but some graphing libraries include a way to render to an image or PDF. Start looking there, not Javascript.
Update: FusionCharts claims to have the ability to export to JPG, PNG, PDF and CSV. Start with this page about exporting pure JS charts in their documentation.
Related
On my TYPO3 v10 website I have some SVG icons in use, no problem.
I also have a few more complex SVG Figures (created with Inkscape), that I want to include in TYPO3 website. Of course I can upload the .svg files to the fileadmin/ folder, and link to them with the Text+Image (or Text+Media) Content Elements.
In the Backend, TYPO3 generates some fine png-thumbnails for preview. So far so good.
The file can be downloaded directly, from its fileadmin/images ... location.
However, inside web pages, my SVGs are not displayed as they should.
A lot of styling information gets removed from the SVG and I don't know where.
Here is a screenshot of the original vs corrupted image (as displayed in the TYPO3 frontend).
Here is a graphical diff that shows the difference between the figures.
It turns out that at some time during the rendering process, TYPO3 removes the values from the style="...." SVG attributes. See reddish boxes.
All my more complex SVGs look like the one on the right when embedded in TYPO3.
Here is the SVG if you want to try yourself: image on SVGshare.com
On the right, many style attributes have been set to style="".
but why?
It's Firefox, not TYPO3, who removes the style="..." attribute values. This seems to be a longstanding Firefox Issue, solved.
See Bugzilla Issue 1262842: [CSP] Blocks the use of style attributes inside SVG without generating console errors.
Look for "triply confusing" in the first comment.
Inline CSS styles can be a security Problem, and therefore Firefox has a Content-Security-Policy (CSP) in place, in order to correct this.
An explainer for the mitigation strategies, written jointly by professional Security Engineers is given in this Google Doc and in Gihub Repo (Content Security Policy), Issue 45, Further granularity of unsafe-inline styles.
Script inline attributes are a difficult subject to approach when it
comes to CSP, they have the same amount of power as any other script
element but they don’t have ways to be whitelisted, for example, by a
nonce or hash. This means that the actual content of the attribute is
mostly the only deciding factor.
I don't understand everything mentioned in these docs and discussions. Inline-style Elements seem to be vulnerable to XSS attacks, and then attacker can put CSS url() in there for instance.
Quick-and-dirty solution
Use Inkscape and save as "optimized SVG", and check the option "Convert CSS Attributes to XML attributes". See attached screenshot of the Inkscape Dialog (Linux).
This solution was proposed by a web-developer from the GIMP devteam.
TYPO3 9 introduced an SVG Sanitizer, which automatically modifies SVG files during "fileadmin upload time", meaning it removes any <style ...> elements from the uploaded SVG file.
In TYPO3 10 and later versions, this SVG Sanitizer is by default automatically set up via Symfony dependency injection via core's Services.yaml.
You can remove the SVG Sanitizer via your own site extension's Services.yaml, e.g. for your myextension/Configuration/Services.yaml:
services:
_defaults:
autowire: true
autoconfigure: true
public: false
# ...
# remove TYPO3's default-autowired SvgSanitizer, which tampers with filadmin uploaded SVGs (e.g. removes necessary <style> information)'
TYPO3\CMS\Core\Resource\Security\SvgEventListener: ~
The tilde (~) removes/overwrites the definition previously set up by core's Services.yaml ( https://symfony.com/doc/current/service_container/service_decoration.html ).
This seems to be a problem of your individual TYPO3 installation. I've just tested your SVG image in a brand new TYPO3 v10 installation and the image is rendered properly in backend and frontend.
Maybe you have some 3rd party extensions installed who postprocess the HTML output of TYPO3, e.g EXT:sourceopt or EXT:scriptmerger.
Using 2sxc on DNN, I have a website that uses SVGs for icons in content types. The client wants to be able to upload the SVG icons to 2sxc via a Link field but then instead of rendering <img src="#Content.SVG" />, they want it to render the source code of the SVG (so we could manipulate the fill color via CSS). Is this even possible and how could it be done?
Basically 2 steps
Get the real file name using 2sxc and DNN
Then load the file as a string using normal .net stuff System.IO and add it to your html - https://learn.microsoft.com/en-us/dotnet/api/system.io.file.readalltext?view=netframework-4.5.1
ca. like this
<div>
#Html.Raw(System.IO.File.ReadAllText(fileName)
</div>
Some examples of how to do this can be found below
Using the fetch API
How to convert image (svg) to rendered svg in javascript?
Older methods such as XMLHttpRequest or jQuery
Include SVG files with HTML, and still be able to apply styles to them?
Using D3
(Embed and) Refer to an external SVG via D3 and/or javascript
Using a custom JS library
One example: SVGInjector
Interestingly Dnn is doing this nowadays and you can look at the code here. If you ignore the caching, you might be able to do similar in a View.
https://github.com/dnnsoftware/Dnn.Platform/blob/0d3b931d8483b01aaad0291a5fde2cbc0bac60ca/DNN%20Platform/Website/admin/Skins/Logo.ascx.cs#L123
And that is called from above, see ~line 71, so they are doing a real inject of the file contents to inline. Obviously caching file-access stuff should be a priority for caching if the website is high-traffic, but otherwise it is not needed or at least secondary.
I have two html tables(containing dynamic content stored in variables) along with headings and paragraphs. When the user clicks the download PDF button, he/she should be able to download one PDF of two pages containing the two tables.
I have read a lot of articles but I found no definite answer to this issue.Should I use jspdf or react-pdf for this scenario?
I am using react frontend and Nodejs backend.
https://github.com/MrRio/jsPDF
JSPDF is a perfect solution for converting tables into PDF in client-side. But if you want to do something from backend
Or you can refer to
https://www.npmjs.com/package/html-pdf
for rendering it in the backend, and make express download it.
Looks like you can call the window.print() method in componentDidMount() to print the complete div, though removing the footer through the script can be a challenge.
Using html2canvas with jspdf has a major drawback that the pdfs are blurred and their clarity varies with the page zoom, as it takes the screenshot of that portion. Hence, you must configure it correctly or compromise on quality.
How do you get rid of or replace the Microsoft Azure Media Services logo overlay (water mark) that is put onto dynamic packaged video? The following link shows the topic area:
https://azure.microsoft.com/en-us/documentation/articles/media-services-dynamic-packaging-overview/
My html contains embedded code taken from http://amsplayer.azurewebsites.net/azuremediaplayer.html
It seems that you are attempting to use the iframe embed code on the "get embed code" section of the player. Please note that this is currently under development, as it is listed on the site: "this embed code is for demo purposes only. Do not use in production."
For your player needs in production, especially if you want to use the large amounts of API's available, you should create your own player page following the instructions in the documentation and by using the samples provided.
Specifically for the question regarding the logo, there is an API available to remove to logo and can be found in the logo option section of the documentation. This is the correct way to remove to logo using the APIs provided.
It might be helpful to post some of the HTML that you are using when you say "My html contains embedded code taken from..."
It looks like the code on that page has the following div:
<div class="amp-logo" style="opacity: 0.5;"></div>
This appears to be what is placing the logo on the page you reference. Not know what HTML is actually in your page, I don't know if this is the HTML they are generating for you as embedded or whether you cut and paste the HTML from the given page.
You may be able to remove it from your HTML. If not, try creating a style that overrides the amp-logo class.
I made the following observation:
If I create an svg image that references an external raster image via xlink:href and try to load the svg in browsers, the external images are only shown if I use the <object> tag, but not when using the <img> tag.
Rendering with the <object> tag is quite slow and not as clean as using the img tag for images so I was wondering if there's a way to make it work through the <img> tag.
At first I thought it doesn't work because of a same origin policy, but even if the referenced image is in the same directory and I reference it through its name only, it wont load.
Any ideas?
Are you using IE? IE doesnt recognize SVG anyway. Microsoft is always ten years behind, yet they are more popular and far more costly, for some reason. Name brand propaganda?
SVG loads in Firefox. Both as an XML document referenced directly in the URL, and also if you embed it into an XHTML (fully XML compliant) document with proper namespacing, the SVG should render properly. The great thing about this option is that DHTML can manipulate your SVG. Everything I said in this paragraph also applies to MathML, if youre curious.
Aside from that, SVG doesn't load from an image tag. I do believe Firefox is working on this upgrade, though. Im not entirely sure.
Using the object or embed tag is reasonable, I suppose... but one of my earlier fixes was to use an iframe. Embed an iframe in your html that references the complete SVG file. Using CSS you can make the iframe look flush with the rest of your document, appearing and acting like an image. Encased in a div or span tag, you can have onhover and onclick event handlers.
Using the image tag, your src can be a PHP file on server side. If properly coded and with the appropriate cgi apps, you can rasterize your SVG on server-side, and have that PNG data sent back to your image via the PHP src.
There's no particular reason <object> should be any slower to load than <img> apart from possibly the interaction aspect (img's are static while object's are fully interactive documents). The images inside the svg should load in both scenarios, so it sounds like a bug in the browser.
Could you post a link to your example?
I think you are at least 10 months behind...IE9 supports SVG, and pre-release versions (including a beta) have been out for quite a while. Check out www.ietestdrive.com to grab the platform preview - it's pretty good. In my opinion, parts of their SVG support are much better than Firefox currently (but they don't support SMIL yet).