I'm working on a web based graph application which connects different nodes via lines. To do so the connection lines are created by the library Leader-Lines. These connections are svg elements, which consist out of different elements as masks, markers, rectangles, etc. (they consist out of many lines of code so I outsourced the code into this JSFiddle)
In case the user finishes the graph he should be able to export the graph as an image. My plan was to create any image format from the html elements of the graph and then pass the image as a base64 string to the back-end to process it further.
I tried the following libraries to achieve this:
html2canvas
domvas
dom-to-image
rasterizeHTML
For html2canvas this is how I used the library:
html2canvas(document.querySelector("#myGraphContainerDiv"),
{ allowTaint: true }).then(canvas => {
var graphAsbase64 = canvas.toDataURL("image/png");
//Some ajax call to send the string to the backend
});
The problem: None of them was able to convert the svg connection.
My next step was to try to convert the SVG to a canvasand then try to convert the graph. This method was suggested in many SO posts. For this I used the library canvg but this didn't work either. For this I used the code from this answer.
Another problem I faced with this method was that with a big number of connections the process took longer and longer (over 1 minute with 8 connections).
The question: Is there a way to achieve the conversion of these connections or is this simply not possible at the moment?
Related
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!
Problem
I'm trying to send an array of images (saved locally on the javascript side on an assets folder) to the native side (both iOS and Android). There the native side process the images and returns a new image. This works because I've tried sending the image URL (using internet based images instead of local images) and the native code runs perfectly.
The problem is that downloading each image is such a slow process, and I would send like 10 or 15 images. I think the best way to handle this is sending absolute paths of the images within the device.
What I've tried so far:
Sending URL of the images (Works but this is not what I'm looking for, the idea is to have the images saved on an "assets" folder instead of downloading one by one)
Ideas:
Maybe I can get an array of base64 strings of every image, but seems like a slow task to do; in the native side I will have to convert every base64 string into data and then into images.
It will be ideal to send the absolute uri path of each asset, but I couldn't find a way to get it (only could get like './assets/myImage.png')
According to React Native documentation (https://facebook.github.io/react-native/docs/native-modules-ios.html) the native side supports the JSON standard formats (such as string, number, boolean, arrays and objects of any type of this list, and react callback/promises)
When you require a local image file on the JS side you're not actually getting its data. Instead, RN creates a map of IDs to images; if you try to log it you can see that it's actually just a number.
Although numbers can be serialized over the bridge this is not enough, to be able to access the image on the native side you first need to resolve the required image to an object that you can later convert on native. On the JS side it would look something like this:
const myImage = require('./my-image.png');
const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
const resolvedImage = resolveAssetSource(myImage);
You can now pass the resolvedImage to your native API, this will be a dictionary object (a map) with the image info (size, uri, etc.). On the native side you can now convert the image:
UIImage *image = [RCTConvert UIImage:imageObj];
On Android it works in a similar way, but as far as I know there are no direct conversion methods, so you'll need to extract the uri from the image map object and load it from there.
Is it possible to be able to upload an excel document with varying ranges of data, and have that data dynamically displayed in a basic form of chart(bar, pie, etc.) on our company website.
After doing some research I figured the only two possible ways to maybe do something like this is to use a very complicated macro in VBA or a Javascript parser to read the data and display it then. The data that will eventually go in here will have sensitive information so I cannot use google charts or anything like that.
This problem has to be divided into two parts.
One -part is to gather and process the information needed to display the chart.
Second - This is the easiest, a way to display a chart in HTML. For this, you can use www.c3js.org javascript library to display the chart in HTML.
Regarding part one, it depends in which technology is built your website.
For example, If it is in php, you will need to find a library in php, which can read and parse excel files.
Then you have to create a service in your website, where the data is going to be provided. For example,
www.yourcompany.com/provideChartData.php
You can format the response as json format.
Once you have solved that, you only have to call the service from your page, and the data will be dynamically displayed. You can call it using jquery library for javascript ($.post("www.yourcompany.com/provideChartData.php",function (data) { code to display chart ....}))
There is no real easy way to do this that I have found. I have had to manually parse these things in the past but there are some libraries out there for node that might help you.
https://www.npmjs.com/package/node-xlsx
You can also export form excel as CSV. When you do this, me sure to set the custom separator to something other than ',' and you should be fine to import it into a large array and get the data/charts you need.
https://github.com/wdavidw/node-csv
Hope that helps.
I'm developing an application in Cordova for Android and Windows and struggle with the recogniztion of the text and numbers in canvas element on Windows platform (W10)
So last couple of days I've wasted my time trying to use the Windows.Media.OCR namespace for the recognition of the handwritten numbers on my HTML5 canvas scribble pad as you can see here on another SO question
I've then found the Windows.UI.Input.Inking namespace and there are few classes available for the Javascript solutions. I've found there is an InkManager that can recognize InkStrokes either in its own collection or strokes in InkRecognizerContainer.
InkRecognizerContainer has the "loadAsync()" method that accepts the input stream. So I've thought I'd just load the canvas converted to stream, and use the InkManager to recognize this container.
Unfortunately, if I try to use the HTML5 canvas converted to stream it throws me "WIN RT: Unsepcified Error" but not in the callbacks, it just crashes the app.
var blob = canvas.msToBlob();
var randomAccessStream = blob.msDetachStream();
var inkStrokeContainer = new Windows.UI.Input.Inking.InkStrokeContainer();
inkStrokeContainer.loadAsync(randomAccessStream).done(function () {
debugger
}, function (error) {
console.log(error);
});
Any help would be greatly appreciated as I'm spending way too much time on this.
InkStrokeContainer.LoadAsync requires a file with ink stroke information, not an arbitrary bitmap. Generally this will be an ISF (Ink Serialized Format) file saved out from a previous InkStrokeContainer. ISF files include stroke information as metadata in a gif file, so they can be displayed by normal gif viewers, but typical gif files do not include ISF data and cannot load into InkStrokeContainers.
InkManager does handwriting recognition not OCR. It requires individual stroke information and takes into account properties such as stroke order and direction. To use it you'll need to pass pointer information to the InkManager, typically as the input occurs, so the InkManager can build the strokes to recognize.
Take a look at the Simplified Ink Sample for an example. The JavaScript version uses WinJS rather than Cordova, but it shouldn't be too hard to convert. The inking is Windows specific, so you'll need to put this in a platform specific part of your app.
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