I have a system build in PHP where I take a pdf and place it as a background and then on a second layer place text on top of it with coordinates. This makes that managing the two different parts are easy. Because the initial pdf is difficult to reproduce in html. So html2pdf is not an option. I tried it but because of all the different lines and sections and text the library cannot manage it.
Base PDF example
Because of reasons I am now looking to replicate this functionality in javascript. So I was wondering if something similar is possible in jsPDF. Or any other library.
After a long and tedious search I found that PDF-LIB is what I needed. They allow to pull in a existing pdf and alter it by writing ontop of it.
I did experience some issues with pulling in the pdf but that can be solved. It was mostly because of fetch() method. But they allow Base64 inport.
Related
I need a javascript library for manipulating/processing images. Not inside DOM, but similar like GDI+ where I can pick an image from file system and manipulate it programatically (get pixel color, change pixel color, add shapes and text , etc..).
I searched goolge but couldn't find such library. So far the best thing I could only find is a library called jimp, but it seems very basic and high level.
Does Javascript have such capability? reading an image and extracting information from it?
I'm searching for a way to cut out any shape from an image and save it somewhere on the server.
I'm looking for solutions in PHP and/or JavaScript but haven't found anything yet.
I'm not sure but as far as I know the gd-library in PHP is only capable of cutting out or copying rectangular shapes from source images.
In JavaScript this probably can be achieved somehow through the canvas-object but I haven't found any libraries that provide such a function (rafael.js or paper.js don't seem to do the job) ...
Example:
Let's say i got the following image:
Now I would like to mark a certain part of that image (by x/y-coordinates):
And finally i want to extract that part as a single image (with the rest of the background beeing filled black):
Thank you for any help
Using PHP only, imagecopy lets you easily copy a part of an image by coordinates and do with it as you wish.
Edit: Using Imagick it's possible to crop images to specific shapes among other functions.
I am building a web application using Parse as my backend.
Part of the signup process involves the user uploading and cropping an image before I pass it along to my database (the picture is part of the user profile, similar to what you would do on Twitter).
I have figured out the uploading parts (both to the browser and then to the database), but I am not as confident with allowing the user to manipulate the image.
Most solutions involve using jCrop to achieve a result similar to the example here (although without the PHP).
Given that I am using Parse, is there a client-side solution that works better? How might a solution look?
Thanks!
Jesse
Basically I would go this way:
Load your image into a <canvas>
Crop the Image: http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
Save a image from the canvas: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
Here is a very good tutorial.
Disclaimer: I haven't tested this yet, but I heard that this way work.
Also use background-size:cover; or background-size:contain; to get around nasty dimension problems.
You can able to crop an image using HTML canvas, but it involves lots of codes, Consider using Cropperjs, It's a pure javascript library for cropping images. Here client-side image cropping by cropperjs is the working example.
I´m new to Raphael and would like to do some basic questions on how to architect my app:
I need to draw models on a visual graphical editor and save them to files (I call them screens). At runtime, I need to load these screens and animate them from server data using Ajax.
Using SVG I can load data using this simple command:
<object id="svgobject" type="image/svg+xml" data=".\svg\svgfilename.svg"></object>
Also, on SVG, we can use some graphical visual editors and that´s all we need to built the screens. The rest if javascript code to get element ids and change their attributes at runtime based on ajax call to get server data.
As SVG is not supported on old browser, one natural choice is to go for Raphael, but I don´t know if there is visual graphic editor that support Raphael scripting language and how to save/load these scripts at runtime.
So, What would be the best approach to visual edit my models, save them to a file and load at realtime using Raphael ?
Ian's answer is one solution. The other way of doing this is to convert SVG documents to a data structure that Raphael can understand.
For relatively simple SVG images you can use svg2path. It converts SVG files (or svg from a URL) to paths that can be loaded into Raphael. From the documentation, running the following on the command line:
svg2path some.svg
generates a path file called some.path that can be loaded in Raphael (presumably using the paper.path() method).
It's available on github and npm.
You could use a plugin like https://github.com/wout/raphael-svg-import or https://github.com/jspies/raphael.serialize https://github.com/crccheck/raphael-svg-import-classic to get you started maybe. I think you may need to do some extra work to cope with groups and Raphael.
Edit to clarify, I'm not sure from your other comments what you mean by Raphael Mode from a graphic editor. You can just the graphic as a straight SVG and import. I'm not sure why there needs to support Raphael scripting.
The VectorEditorJS is a nice starting point for you.Look into editor.js to build or rebuild your own functionality over it.Here's a demo.
EDIT
The SVGEdit demo has got code to save the vector as an svg.You can look into the code.
I need to display TeX content in a div. As far as I understood MathJax will be slow for tex files bigger then one page. So I decided to make HTML from TeX on server with htlatex. The problem is that some are printed as image and inserted in html. So here are my questions:
What way of images for dynamicaly generated HTML is better? I'm afraid putting them into folder will take a lot of disk space.
Is there an easy way to generate MathML from tex (so that I will not need to think about previous question)
Maybe there's an other more easy solution for my problem?
UPD. And have I understood correctly that MathJax is not to be used here?
To answer two of your questions:
Depending on the server-side technology you use, you might have no other choice except to put all the generated image files into a folder. You could write a job that regularly deletes older images to save disk space.
There are a few tools that can convert TeX to MathML, for example TtM (TeX to MathML) or TeX4ht.