Creating thumbnails of div content - javascript

I have very complex chart representation using svg (using d3.js library). Is it possible using javascript to create thumbnails of those area and display it somewhere on the page?
I have found jquery nailthumb plugin. But it needs image and it does not work exactly as I want.
Please let me know if it is even possible with javascript.

Related

How to create an interactive HTML table that is resizable on demand

I am trying to implement a plugin which enables user to drag the border of an HTML table to adjust the size of it (like below). I tried to use vanilla JavaScript but it is not perfect.
Or (as a brainstorm), maybe can I not treat it as a HTML table element but some kind of graphics on a panel and use libraries such as WebGL to make it interactive. And also implement text typing in that graphics to make it like a table. Not sure if this is feasible?

How would one create an image from a website using data from a form?

I'm not sure what tags this would fall under so I apologise if the scope is too large! I'm currently trying to build a site where a user would write their name into a form and select a template to build on top of. The site would then generate an image of their name and put it over a specific box on the image template they selected.
If anyone has some suggestions on how I could approach this / resources that would help, I'd really appreciate it.
An example is posted below:
To write and manipulate image in PHP, use Imagick or PHP GD.
I would recommend Imagick as it has more image formats and quality is better. But if you want fast rendering, use GD.
Using Javascript, you can use Canvas. Here is an example to use canvas to write on image How to add text on image using JavaScript and Canvas

Generate PDF from SVG/paper js

I'm using paper.js to generate SVG-files in the browser.
Is there a way to generate PDF's from these SVG's?
I have javascript and .NET in my toolbox and using third party components for generating the PDF documents is not a problem. I'm currently looking at SelectPDF as a possible candidate for generating the PDF's. It works great with HTML but I'm not sure it handles SVG's that well.
Look at http://www.cloudformatter.com/CSS2Pdf
Down the left side navigation there are many samples of SVG to PDF charts. The one item to check is if your implementation code inserts the appropriate SVG namespace. Some of the samples show doing so if the charting library doesn't.
API guide is here http://www.cloudformatter.com/CSS2Pdf.APIDoc.Usage and shows both formatting div with content or even just specific SVG.

jQuery Image slider for ASP.net

I want an image slider similar to what is shown in the link below.
http://blog.dreamcss.com/wp-content/uploads/example/
I have customized the script to my needs but I'm not able to find a way to change the image transition effect, rather than moving image from right to left I want image to dissolve & show other image that would make this script really code. I am open to new jQuery based Image Effect Slider/Gallery With similar look. This is the client's request so the design will remain same.
I would appreciate if i can change the image effect or if some one can provide me link for similar image slider.
I have to use this with ASP.Net and possible modify this script to integrated with database using c#
Thanks in Advance..
I use Flex slider http://flex.madebymufffin.com/ , it is very customisable and lightweight and should do what you want
Take a look at these Javascript Image and Photo Galleries. I would recommend using the existing APIs provided by these script libraries using JSON to pass data to the client from the server as opposed to modifying the script -- keeps it simple.
Alternatively, you could look at some of the stuff on CodePlex: Image Gallery if you wanted a server control to use with your solution.

rubber-banding multiple areas in javascript

I'd like to display the image, then let the user create multiple rubber-band selections on the image. Each mouse-down creates an additional selection. Has anyone seen an implementation of this technique in javascript?
I did use this image cropper script. It uses a rubber band to select the crop area. The code is pretty simple to follow and you could probably modify it to do what you want. Selecting overlapping areas would probably be a bit of a challenge though.
Script: JavaScript Image Cropper UI, using Prototype & script.aculo.us

Categories