Include img content in dom-to-image conversion? - javascript

I want to be able to create lots of customized playing cards using HTML and CSS, and then convert all cards (divs) to image files. I have used the dom-to-image library to do this, but the problem is that the images within the divs are not recreated. Is there a way to do this with the dom-to-image library? Or is there some easier way to turn HTML elements - including img tags - into images?
Edit: I found a way around it in a program I am using, so not in dire need of help anymore, thanks.

Related

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

html5 canvas image grid in javascript

I'm trying to build an image grid with canvas, but I'm not sure how to perform operations when a particular image is clicked. I want to achieve functionality like in this website https://big.dk/#projects but it's too complicated for me to grasp, I'm comfortable using javascript preferably Angularjs instead of JQuery if possible. I'm thinking of using tables to align images in a grid, can we achieve this kind of functionality without using canvas ? any suggestions would be of great help. thank you.
Yes, of course you can make this without using canvas either using bootstrap grid or with any other grid system you like,
Probably this can help you jsfiddle.net/webtiki/MpXYr/2/
And you should use transition css for smooth image zooming(resizing) on mouse hover.

Creating thumbnails of div content

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.

Image manipulation - Creating characters on fly

I have set of designs needs to be applied to an image and saved. So if you are a user, you come to my page and add mustachio or any other face elements like hair or eyebrows to a face and save your image.
Im looking for a plugin where I can use this kind of techniques and also allow me to save it as an image on fly.
I can see a lot of masking techniques/ plugins used but I'm not sure if these techniques are capable enough to handle such a thing,
Could you please share your thoughts on this?
Thank you all in advance
You may want to look into the element for creating and saving the image.
a good library that can handle multiple canvas's as layers is EaselJS or FabricJS. Both have pros and cons but can handle multiple layered images as output to one.

How to split an image by JavaScript?

In slideshows using libraries such as jQuery/jQueryUI, it is common to split a slide and disperse the fragments for disappearing the current slide. I am curious about the trick to do this with Javascript. I mean pure JS to understand the process, not implementing with an available library.
As I searched over the internet, a common way to split a image by Javascript is to set the image as a background and show fragments by CSS, but I doubt this is the method used for creating slideshow effects.
How Javascript can split an image/slide?
You could try using the canvas tag in HTML 5. You can import an image on the canvas and work your magic on it from there. I do not have an example in hand but you could give it a try yourself.

Categories