I'm trying to create a new PNG file to serve back to clients via HTTP (as a response type image/png)
The new file is created by concatenating 3 base PNG files and adding a custom text in the middle of the image.
Problem is, there no built-in library in nodejs to do this. I spent a couple of hours searching and to my surprise, there is no pure JS library to do this. The closest thing is node-pngjs but it lacks the ability to add text. I understand that the text part is complicated since it's somewhat dependent on the OS (fonts installed, DLLs to interface with said fonts, etc).
There are other node modules that are wrappers around imageMagick (gm) and GTK (canvas) but unfortunately imageMagick is 155MB of binaries, and to use canvas you need to compile from source, install python and VS 2010 C++ Express Edition and it does not work on the lastest version of GTK.
The best I got right now is to write an .NET assembly and use it from inside node via edge.js, but that will require both Windows OS and .NET framework on the server.
Again, the complicated part here is adding the text inside the image.
Any suggestion on how to get this working without a sh**load of external dependencies?
Yes you are correct, the Node.js support for image processing libraries is weak, most are the wrappers of some CLI application.
The solution that I would use involves PhantomJS which has the canvas and svg support, you could use these features. It's lighter than the other options and does not require external applications to be installed. http://phantomjs.org/quick-start.html
Related
Our web application(many d3 charts) is set up by vue, and I could export our
webpage to pdf by the combination of canvg, html2canvas(convert web content to
png) and emit png file to server and use nodejs to download it automatically
and periodically(weekly report).
However, I was asked to use different render method from client-side to
server side rendering and use wkhtmltopdf or phantomjs to download pdf.
My question is that is it difficult to render many complicated d3 chart and edit
css in server side rendering by using vue or another technique?
Thanks!
The wkhtmltopdf is a popular library for converting complex html content to pdf.
You don't have to worry about your complicated d3 chart or css. It will handle it. But you have to install wkhtmltopdf command line tool on your system.
SVG DOM elements can be convert into different images format using server side rendering option. Apache Batik such a library to convert SVG DOM elements into pdf,png,jpg,word.
Batik is a Java-based toolkit for applications or applets that want to use images in the Scalable Vector Graphics (SVG) format for various purposes, such as display, generation or manipulation.
The project’s ambition is to give developers a set of core modules that can be used together or individually to support specific SVG solutions. Examples of modules are the SVG Parser, the SVG Generator and the SVG DOM. Another ambition for the Batik project is to make it highly extensible —for example, Batik allows the developer to handle custom SVG elements. Even though the goal of the project is to provide a set of core modules, one of the deliverables is a full fledged SVG browser implementation which validates the various modules and their inter-operability.
I have a web app that I'm building that has dynamic widgets being constructed on the client-side. Currently I am using nodejs and pug as my server side templating library, and I like the simplicity of pug.
I would like to have a series of small pug files on the server that the client side can use as building blocks to construct the user desired widget.
I tried using a previous solution found here:
client side server side templating nodejs
However, that solution looks like overkill for what I want. Moreover, it looks like the ezel project is no longer maintained, it hasn't been updated in 2 years and it still uses jade (which npm gives me a lot of errors).
I just want to be able to construct my dynamic widgets in pug in the browser. This page seems to have exactly what I want:
https://pugjs.org/api/reference.html
Specifically the pug.renderFile('path/to/file.pug', options); function seems like exactly what I want to use to dynamically build my widgets (the user has all the controls on how the widgets are constructed/displayed, so the browser needs to dynamically construct the html views)
My issue is the dependence on:
https://pugjs.org/js/pug.js
And the need to do require('pug') in the browser. I already have pug installed as part of my package.json. Is there a more robust way of getting pug.js directly? I am still new to web development, my background is in C++/Java, so I'm not entirely sure if using pug.js in the browser directly is the best solution or if there are better standard solution. The stackoverflow question I posted is the only post I came across that is remotely similar.
I researched and tested a solution that I really like. NPM has a cool package called pug-cli.
https://www.npmjs.com/package/pug-cli
I modified my npm start script to do the following:
pug -c -w --name-after-file -o public/js/views views/client/
What this allows me to do is write my client views in put in the views/client folder. A task is running in the background that monitors changes in views/client/. Upon changes, it complies .pug files from views/client/ folder into javascript and saves it into public/js/views/. Then in the client code you just include Template.js and call Template(parameters) in your js. There is no need for a pug.js on client side. This is with debugging, to turn debug off, run with -D
For instance, views/client/example.pug will get automatically complied to public/js/views/exampleTemplate.js
Then all you have to do in the client is include this js file, and call exampleTemplate(params) to get your templated string (you can call this arbitrarily with different parameters get different views). This allows me to arbitrarily/dynamically compose and construct views from the client, when the views are unknown on the server side.
I like this approach for my workflow, but I am open to better suggestions.
If you use webpack:
https://github.com/pugjs/pug-loader and
https://github.com/willyelm/pug-html-loader serve well.
In case of rollup:
https://www.npmjs.com/package/rollup-plugin-pug + https://www.npmjs.com/package/rollup-plugin-pug-html seem to be good solution (currently testing how it works, we are now experimenting with native es6 modules and backuping bundles with rollup)
In case of browserify:
https://www.npmjs.com/package/jadeify (never have tried)
Also pug-cli have got -c key, so you can just run any watcher and generate js files as mentioned above, but it seems to be bit too straightforward since we've got variety of bundling tools now in 2017.
I recently made a program. It's developed using Node.JS and Electron to make it a desktop application. Unfortunately, Electron is quite big in base file size and I'd like to reduce the file size. I've looked at my app files before adding electron and it's around 38mb. When adding electron it's roughly over 100mb more than the original.
I've been looking into converting the program to Python to hopefully reduce the size of it. Though I only know the basics of Python such as how to declare variables and functions. I've seen stuff like Tkinter and stuff, but would I be able to use HTML, CSS, JS to make the UI of the program and use Python as the back bone(i.e. using materailizecss framework for the ui).
If so, how could I do this? Also, to make it clear, I don't want a web app, I'm looking for a desktop application.
YES. You can use QT standard library but if you persist on writing UI yourself there is an HTMLpy Library which can find here HTMLPY
htmlPy is a wrapper around PySide's QtWebKit library. It helps with creating beautiful GUIs using HTML5, CSS3 and Javascript for standalone Python applications.
go through it and you will find interesting things
There is actually a topic asking a very similar thing, however the information there is either out of date (broken links, discontinued solutions) or not suitable for my needs.
I have a showcase for my graduation wherein we have the opportunity to display our work to potential employers. The interface we have to use only allows .jpg, .flv and .exe files, however my project is in HTML / CSS / JavaScript.
Is there any way I can convert my project into a .exe?
(The ways the pre-existing question's answers suggest creating an .exe are now broken links / discontinued as far as I can tell; and alternate answers suggest ways to create standalone applications which do not generate .exes, which are not fit for my purposes)
Cheers!
Most easiest way is:
1) Download Visual Studio Express Edition(Because it's free).
2) File -> New Project -> Windows Forms Application.
3) Load your current HTML into it.
4) Add WebBrowser control to your project.
5) Deploy your application(Build -> Publish).
Note:
The WebBrowser Control use IE by-default. Take a look at this alternative as well.
Welcome to 2019!
There's all kinds of different ways to accomplish this now. One popular npm package is npm pkg. There's also the popular Electron (this is what vscode was built on), and quite a few others
You Could always turn the HTML file into a HTA file and then convert it into an exe :)
https://www.vbsedit.com/
You can create a Windows app from HTML/JS.
Actually it's one of my pet projects:
Scriptonit
I've been using it for a while to create tools for myself, but just recently I decided to make it a proper freeware product. If you're not looking for something very complex and you don't need lots of frameworks & modules, this might be just what you're looking for.
You can download Scriptonit here.
You may try creating a .exe installer to you html file using Inno Setup.
You can use the setup wizard; just select the html file instead of exe when selecting the main exe file
It works somehow like an installed application, it will open in your browser but you can see in the List of Applications. (in control panel)
For browsers that don't support SVG, I'd like to show a static image of a chart instead of an interactive version.
One idea is to generate all possible chart states (around 300) beforehand. I tried using the Canvas2Image library but it doesn't seem to allow me to specify a filename. Is there any workaround? Perhaps a server-side solution?
There's a couple other ways to solve this.
rsvg is a rendering library that processes SVGs statically single-pass. It's used in ImageMagick's convert tool, and also has python and other bindings. Some people find various SVG-isms aren't supported, but rsvg gets updates now and then so best to just try and see.
inkscape is a GUI program that includes SVG->PNG conversion. But it can also be used exclusively on the command line (no X11 required). See man inkscape for all the command line options that can be used to process your svg's; it's quite flexible. The rendering is relatively fast. The main downside is that being a GUI program it has a lot of dependencies, that might not be present on a web server.