I want to use JSChart (http://www.jscharts.com/) to generate a dynamic chart.
It uses a <canvas> object.
Furthermore I want to save the generated Chart as an image (to put in a pdf file) on the serverside.
Is it possible to save a JavaScript generated image as jpg or png on the serverside?
Preferably the solution should work with Ruby and Ruby On Rails.
I think this uses a <canvas> object to render the charts, can't tell without downloading and it requires registration, so no. If it does, perhaps take a look at Canvas2Image, that returns the canvas as a data URL, base64 encoded image, which could be sent back to the server via an AJAX call.
You can use http://xmlgraphics.apache.org/batik/ on the server to convert an SVG. It's the method used by highcharts to convert the graph generated by the application. See http://www.highcharts.com/docs/export-module/setting-up-the-server
Related
I am considering using quill.js as a HTML editor on my page. I see it is possible to add a image (from your computer) to the HTML Editor. But where does this get saved when I save the form?
Do I need to save it a as a separate file? Will it be saved as a BLOB in DB? Or any other way?
If you take a look at the source of the DOM (using the playgrund) inside the editor, you can see that the image data is converted to a data:URI with base64 encoding.
If you take a look at this question you will get an idea of how they are converted.
Using this makes it easy to store pictures or other binary data inside any site without referring to other sources.
I want to get the screenshots from PageSpeed Insights. Using the API, I used a code that i founded here : https://embed.plnkr.co/plunk/c7fAFx, but doesn't work.
please help me! I am learning to code.
Why doesn't the linked code work?
Well because it is ancient and attempting to use the version 1 Page Speed Insights API.
It is currently on version 5 so that is why it does not work, v1 no longer exists as a public API.
How to recreate the functionality of this App?
As you are learning to code I will lay out the steps for you and then you can research how to do each step and use that to learn.
I will warn you as a beginner there is a lot to learn here. However on the flip side if you manage to work out how to do the below you will have a good first project that has covered multiple areas of JS development.
As you have marked this "JavaScript" I have assumed you want to do this in the browser.
This is fine up until the point where you want to save the images as you will have to work out how to ZIP them which is probably the most difficult part.
I have highlighted the steps you need to learn / implement in bold
1. First call the API:
The current URL for Page Speed Insights API is:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://yoursite.com
Just change url=https://yoursite.com to any site you want to gather the images from.
For a small amount of requests a day you do not need to worry about an API key.
However if you do already have an API key just add &key=yourAPIKey to the end of the URL (replacing the yourAPIKey part obviously :-P).
You want to make an AJAX call to the API URL first.
2. Parse the response
Then when you get a response you are going to get a large JSON response.
You need to parse the JSON response and turn it into a JavaScript Object or Array you can work with.
3. Find the relevant parts
So once you have a JavaScript Object you can work with you are looking for "final-screenshot" and "screenshot-thumbnails".
These are located under "audits".
So for example if you parsed to an array called lighthouseResults you would be looking for lighthouseResults['audits']['final-screenshot'] or lighthouseResults['audits']['screenshot-thumbnails']
"final-screenshot" contains how the site looked after it was loaded, so if you just want that you want this element.
This contains an image that is base64 encoded (lighthouseResults['audits']['final-screenshot']['details']['data']).
"screenshot-thumbnails" is the part you want if you want the "filmstrip" of how the site loads over time. This contains a list of the thumbnails base64 encoded.
To access each of these you need to loop over each of the items located at lighthouseResults['audits']['screenshot-thumbnails']['details']['items'] and return the ['data'] part for each ['item']
Find the parts that you want and store them to a variable
4a. Decode the image(s)
Once you have the image(s) in a variable, you will have them as a base64 encoded string at the moment. You need to convert these into usable jpg images.
To do this you need to base64 decode each image.
For now I would just display them in the browser once they are decoded.
learn how to decode a base64 encoded image
4b. Alternative to decoding the image
As the images are base64 encoded they can be displayed directly in a browser without decoding first.
You can just add an image where the src your base64 image string you gathered in step 3.
If you just want to display the images this is much easier.
Add images to the screen and set the src to the base64 image string you have from step 3
Saving the images
Now you said in a comment you want to save the images. Although this can be done via JavaScript it is probably a little advanced for starting out.
If you want to save the images you really want to be doing that server side.
However if you do want to download the images (filmstrip) in the browser then you want to look into a zip utility such as jszip.js.
The beauty of this is they normally want you to convert the images to base64 first before zipping them, so it may not actually be that difficult!
I have image urls in JavaScript and am trying to save them all onto a single PDF file. I am using jsPDF (JS library to generate PDFs) but it can only take images as .jpegs. Unfortunately the images I have are .ashx. Is there I way I can get convert the .ashx to .jpeg via JavaScript client-side?
Examples of image url:
http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=3849&type=card
http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=2923&type=card
http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=36037&type=card
Not possible. javascript cannot manipulate binary content. There's no client-side Javascript support for doing image manipulation.
My app loads a small HTML document that contains one image in a webview. How can I fetch this image and use it as a Bitmap object in my app?
I'm already using a JavaScriptInterface together with my webview for getting some other information, like passing booleans. Is it possible to pass an image aswell via the JavaScriptIterface? Is it a good idéa or is there a better way?
Take a look at this question: Get image data in JavaScript?
You might be able to draw the image on a (I presume hidden) Canvas, then Base64-encode it with toDataURL and pass that as a string through the JS interface then decode it on the Java side. I imagine it'll be slow, but it's worth a try.
Can I load something using AS3/SWF and then create a DOM element using javascript to display the loaded data, without having the browser to load the same data twice?
Yes, but it's not easy. You would have to convert the image to (for example a base64) string using a custom function looping through all the pixels of the bitmapdata, then send it to the webpage using an external interface, and then convert it back, either using the base64 to set the image url, or using Canvas to build the image manually from the pixels.
Perhaps I've missed something in what you've said but wouldn't it be quite easy to use the FileReference upload() method to send the file to a php script which then moves the file to the desired location on the server. If you wanted to have the image display in html without a new page load you could (I'm not too familiar with JS but I assume this is possible -> ) periodically check to see if your desired file is in the desired location. You could call a js function through ExternalInterface to tell the html page to expect this file and to check for it.
I've not tested this method so I can guarantee there are no flaws in it but it's the way I would attempt first. I'm assuming you're sending an image but it would work fine for any other file.