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.
Related
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.
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 going to have a lot of images and trying to find the most efficient way of storing these images to keep the page snappy.
So far I have thought of just the two ways: load with javascript eg picture = new Image(); picture.src = "file.jpg"; and append / remove to the page as necessary, or load into <img> and set display:none.
Are there other options? what is considered the best way to do this?
The best way for a photo gallery (if thats what you are building) is usually to have several sizes of the images, at least two:
a smallish size that is highly compressed and thus have a small footprint: this is the image you load into grids and display in a page where there are multiple images
a larger image with lower compression and higher image quality - this is the one you show when people want to see details.
Since people most often come to the detailed image from a page where the small/fast loading version has already been shown, and thus is already in the browsers cache, you do a little trick and have instant photos, without preloading anything.
It goes like this:
On the details page you show the highly compressed small image in an image tag that has the dimension of the larger detailed version. You then load the larger detailed version in the background using new Image() with an onload event attached that changes the source of the image tag with the small compressed version to the large detailed version.
It looks great, works fast and users will love you ;)
PS: the best way to store images is the browsers cache, not js or the DOM, so if you truly wish to preload images, which is generally a bad practice (tho it can be necessary sometimes), make the browser fetch them for you in the background by including a css file that references them in styles that aren't applied to visual areas of your site.
I'm not sure about "efficient", but the most logical way would be not use the JavaScript to load an image (useless if you have JavaScript disabled) or to set the image as hidden via the display property (likewise, and the browser will probably just load the image anyway).
As such, a sensible suggestion would be to use boring old paging and display 'n' images per page. However, to bring this up to date, you could use "lazy" (a.k.a. "deferred") loading and load additional page content via Ajax as the user scrolls. However, it's key that this gracefully degrades into the standard "paged" behaviour if JavaScript is disabled, etc.
The perfect example of this in operation is Google's image search, and if you search here on StackOverflow you see a discussion of possible implementations, etc.
It's better to use javascript the way that you have it and then add it to the DOM as you need, as opposed to first adding it to the to the DOM and then hiding it because DOM manipulation is much slower and you may not use some images
My demo is here.
Basically, I have a HUGE image (19160px × 512px to be exact, just under 2MB) that I transition the backgroundx using javascript to make it appear as if a transformation was happening.
I cannot compress the image much more without ruining its quality dramatically. Is there another way that I can achieve this with the same level of cross-browser and not rely on plugins like flash, but have it load faster?
Have you considered making this a video?
It might improve loading time somewhat.
Also, another idea. Have you tried using only the first and last image, putting the last one on top of the first, give it opacity:0 and fade it in using JavaScript (e.g. jQuery)?
The effect won't be 100% identical to what you have now, but it might look good enough to please the client, and it would reduce loading time to a bare minimum.
If both ideas won't work for you, I think the first 10-12 frames could be compressed more effectively as GIF images. (It's an estimate, I haven't tried.) You would have to split the image into multiple div s to do that and change the method you use to switch the images, and you would have more requests, but it could be worth it.
If it is a jpeg, you can always use progressive encoding. it will become clearer as it is downloaded.
There is also an interlaced
"Progressive JPEG" format, in which
data is compressed in multiple passes
of progressively higher detail. This
is ideal for large images that will be
displayed while downloading over a
slow connection, allowing a reasonable
preview after receiving only a portion
of the data. -Wikipedia
Slice it like Google Maps.
If you want to change that many pixels on the screen at once, you'll have to get them to the client somehow. You could chunk it into multiple images and use something other than background-x, but then you expose yourself to other potential network interruptions along the way.
The only alternative I can think of to precomputed images like this one is to do the computation on the client - start with the full-colour image and manipulate it using the client's CPU. Your options here involve canvas or CSS3 or a plugin.
I'm not a big fan of Flash but in this case it seems like the right tool for the job (unless you need it work on the iPhone). If you don't have the Flash authoring tool you can use the free Flex compiler.
See http://www.insideria.com/2008/03/image-manipulation-in-flex.html
Make it into an animated gif? Break it up into individual parts to remove all the area that is obscured by content.
This is a long shot but I've seen things which might make it posssible.
I have a div, which is filled with images. Album covers if you must know. And I want to allow users to download this as an image. So they could use it as something like a desktop background.
So is this possible? Get this visual representation of an element and display it as an image?
Basically you can't do that. At least crossbrowser. But if it is not critical. You can try <canvas>
check here http://www.nihilogic.dk/labs/canvas2image/
Assuming I understand the question...If you know the position of the images in the div, you could concatenate the images together server side into a single image. Then just have a button users can click on that will call the function to assemble and download this image.
From what I understood from your question you can use an
img
tag for this. The user can view the image in the browser and can save it to their hard drive.
from your description each of the image inside will be a different album cover, so combining these into a single image won't a good idea.
You could possibly do the rendering serverside. By this I mean that you could generate the HTML and kind of "screenshot" it on the server. The result would nearly always be at least slightly different from what the user sees, but depending on your requirements it might be enough.
There are various tools to do this, for example wkhtmltoimage, which is a sister project of wkhtmltopdf and can be found at https://code.google.com/p/wkhtmltopdf/