HTML frontend SVG export download with JavaScript - javascript

I'm using highcharts to create SVG charts. So, the chart is shown in the frontend, with an svgHTML tag.
Now I want to export that chart as an SVG file.
My effort
Since the SVG is generated purely in the frontend, the backend knows nothing about it. And if I want to initialize a download with some content, what I know about it is to make an HTTP response with the content.
So I can simply grab the SVG content as a string, then upload it with an HTTP request, then response the content as it was.
I want it better
I think there is logically no need to transfer by such a way, because the frontend knows everything we want.
I turned for your help: Is it possible to initialize a download in the frontend?

You can generate download links directly using the base64 encoded version of your SVG data.
You just need to add data:application/octet-stream;base64, in front of the base64 encoded data.
Here is a simple fiddle to demonstrate;
http://jsfiddle.net/xkbhf7mo/
EDIT:
You can also specify a filename with download attribute in anchor tag to make things more pretty.
<a download="your_file_name" href='...'>Download</a>

Related

Is it possible to read the image using URL in After Effect?

I am new to after effects, I have read article to change text and price through xml file or csv file. But is it possible to read the image file using any URL script.
So my concept is to make one template contains ProductImg, Title, Description and Price, by reading either xml or csv document,
So next time I will replace the xml file. But I have no idea, how to replace product image.
It's possible to do this, but not as simple as changing text data in a Text Layer. You have to use ExtendScript, and I would recommend using the system.callSystem() method to call a command that would download the remote file on a server somewhere. You could use something like wget or curl with the correct parameters to retrieve the file and then import it into After Effects using other ExtendScript methods.
For this type of workflow, I recommend forgoing the use of CSV and XML and just use a cloud-based datastore, like Google Sheets. For this, you would need the Templater software extension by Dataclay to accomplish what you want very easily. Out-of-the-box, Templater handles remote footage assets, you would just need to be sure that the URL to those assets be accessible from the machine that After Effects is running on, and that the URL is a direct link to the asset.

How can I send multiple images created by PHP directly to JS?

I have a PHP script that generates images. At this moment with every request PHP creates a temporary directory and fills it with the created images, then it sends the links to JS, which displays them in the browser in a special order.
Is there any way to pass these images directly from PHP to JS without a temporary directory?
I don't want to use temporary directories because it takes space and resources of server and I have to check that images download has been completed before deleting them.
I am thinking on using Json encoding and decoding but I don't like this because it's time consuming.
Is there another way to send images directly from PHP to JS?
There is a way to work with using src to php script with headers:
Using PHP to send a certain image
or
How to generate image file using this PHP function?
But this I could only work with one image per request.
I mean - if I have 5 or 6 divs with images I have to make 5 or 6 requests from JS to my php script.
Is there a way to send multiple images from PHP to JS?
My first idea would be to encode those images with base64_encode and pass that encoded data to your JavaScript. With this approach, you don't have to save those images anywhere.
More information on displaying base64 encoded images: Base64 Encoding Image
What you can do to not overload your server is to use an image hosting external website, like imgur, giphy, etc. This will scale the image for you in different size, see their api.
Here I am going to share a little hack, to host permanently contents into the internet archive. it is easy to implement from php.
Please don't use it for high traffic.
1/ Host your content on your site, create a url_link.
2/ Post your link to archive.org:
https://web.archive.org/save/*url_link*
3/ Response is a link on the form:
https://web.archive.org/web/20180XXXXXX626if_/*url_link*
4/ Modify the link, remove if_ this is the permanent link for the next centuries.
https://web.archive.org/web/20180XXXXXX626/*url_link*
5/ Delete content from your server

how to secure img src path when user clicks on view source using javascript?

How to secure the src path of the image when clicks on inspect element so that user should not get to know about the actual src path..please help me with the solution and it should be done with javascript only no other tags should be used.
You can convert image into base 64 data URIs for embedding images.
Use: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Code sample:
.sprite {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
}
This is commonly done server-side, where you have an endpoint that serves the image file to you as bytes...
You can store the images in a private location on the server where IIS/<your favourite web server> doesn't have direct access to it, but only a web app, running on it, with the required privilege is authorized to do so.
Alternatively people also "store" the images in the database itself and load it directly from there.
In either case, the response which has to be sent back has to be a stream of bytes with the correct mime type.
Edit:
Here are a couple of links to get you started if you are into ASP.NET:
http://www.codeproject.com/Articles/34084/Generic-Image-Handler-Using-IHttpHandler
http://aspalliance.com/1322_Displaying_Images_in_ASPNET_Using_HttpHandlers.5 <- this sample actually does it from a database.
Don't let the choice of front-end framework (asp.net, php, django, etc) hinder you. Search for similar techniques in your framework of choice.
Edit:
Another way if you think html5 canvas is shown here: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
However you run into the same problem. Someone can view the image url if they can see the page source. You'll have to revert to the above approach eventually.

Return image from HTTP Post request in Javascript

I send data from a browser to a servlet using JavaScript, then the server processes the data and returns an image as a response (all using xmlhttprequest). I'm sure everything is working fine because when I call the server directly, I get my image back in the browser.
What I was wondering is how, in JavaScript, do I parse my response so that I can display it as an image in an img tag?
I figure this should be fairly easy, but not sure how to do it.
You could use data URIs and set the base64 encoded binary data as the src for an image tag.
If you have control over the server, it might be cleaner to have the server give you a URL you can refer to and create a new img tag with that src.
Not sure if this would work with your application, but you could use a server-side script to dynamically serve an image, and then just use javascript to change the source of your image.
i.e.
src="image.php?param1=XXXX&param2=XXXX"
Or just have your XMLHttpRequest return a new path to an existing image on the server and then just change the src attribute of your img.

Is it possible to download image using Ajax

I know we can request xml, html as well as text images directly using ajax but can we request files like image, zip etc. using Ajax. How ?
Ajax just means "Making an HTTP request from JavaScript without leaving the page", so yes.
You can't do much that is useful with a zip file or an image if you fetch it with XMLHttpRequest though.
Images can be added to the document by simply generating a new <img> element.
It might help if you provided more information about what you were trying to achieve. It sounds like an xy problem.
You could transport the image over an xmlRequest as base64, but since base64 is ~30% larger it will have some impact on your speed.
Yes, you can do so. Actually the same ajax principles apply here too. You use a server-side language to download a file.

Categories