I already looked at How do I convert my entire div data into image and save it into directory without using canvas?
And I used the html2canvas library and i was able to get an image, but it was not how i wanted it because I had a 3dtransfomed div inside and the final image did not keep that property.
The result using the html2canvas lib was this:
And what I wanna get is something like this (blue dots are irrelevant):
I have lets say this html code: <div id=background><div id=pig style=transform: matrix3d(1,2,4,2,34,4,5,3,54,3,4,4)><img src=whatever/></div></div> And I want to convert it to an image. I tried using the html2canvas library that they mentioned on the post i linked to at the top. But the result was the first image i posted. What I want the result to look like is the second image. So I thought it was because it did not take into account the transform3d on the pig div.
I'd recommend taking the image you get (which looks fine, but not skewed correctly) and running it through CSS transformations.
Information about CSS 3D Transforms
This demo of skewing a 3D prism with CSS should be of particular interest to you
Related
I own a few fanpages on facebook in which I post images containing funny text ( like the example below ). Across all the pages I use the same text but with different background images. The sizes of the background is always the same. Only the color changes. Since I have to save each picture with a different background individually, I am now trying to create a small script that allows me to store the creates text with different backgrounds as a jpg or png file. Here is how i imagine the process:
I would add text to a textarea which would be a part of a normal html form.
With javascript I would like to fit the text ( in fontsize, width and height ) within the white border of the sample below.
When the form gets submited the script should then run through a loop and save the text on each different background in a seperate folder.
Here is an example of what the output should look like
There are parts of my plan that i know how to figure out. But there are two things I am stuck with.
How can i adjust the text so that it fits within the white border of the sample image?
How can i create an image out of a background image and some text on top of that.
Does anybody have an idea on how to approach this? Or maybe even a fully working script I could use for that?
I'm not sure there's a way to do this kind of image generation in PHP. You tagged it Javascript so I assume you have a front-end.
I was about to suggest something like FitText.js but in order to save your work as an image file, you'd need to use the Canvas API. It has a toDataUrl('image/jpeg') method.
You can use canvasCtx.drawImage to create the image background. A canvasCtx.strokeRect to create a rectangle that has a border. And canvasCtx.fillText to draw the text.
Fit text to a container
There's a method in the canvas to measure how much space the text will take up at its current font size. However, this won't wrap the text when there's available vertical space, putting it all on one line instead. A better solution would be to have a fixed font size and multiple lines in a <textarea> or multiple <input>s, allowing you to fit the text as discussed in the following stack overflow thread:
Size to fit font on a canvas
Save the image to a file
Check out this thread: Save canvas as jpg to desktop
Honestly, after all of that, I'd say it would be easier to set up a little bit of automation in whatever photo editor you use. For example, a template PSD in Photoshop.
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 have a simple png image with building and I need to create custom areas above the image, like in this example and call in js, using the DOM. So, I can solve this problem, via div tags with position: absolute, but is this the correct way?
It is a correct way. However, you can use the same approach as in your example. They use svg object with one big .png image.
I'm searching for Javascript (JQuery if possible) plugin that can generate an image representing the inner content of a DIV.
Example : This link shows an image containing 3 x 3 box display.
What I would like is that these boxes could contain an automatically-generated picture showing what a specific DIV's content look like.
Is there such a thing?
If you don't have too much content on the screen, this seems like a simple option
html2canvas
It is well documented
Well tested
But it will not work for all elements
It will not work with all atributes
But this is the solution if you want to take the screenshot of your page only(where you know the possible attributes and elements)
I don't think that Javascript can create an image from the scratch, but for sure is possible to make that on the server and use JS to make an AJAX call to it.
Hope this helps.
You could use "webkit to image" wkhtmltoimage: https://code.google.com/p/wkhtmltopdf/ I've used it to generate images from javascript graphs and tables etc. Any html will work. Its not purely javascript, but you could send the html div (and relevant css) to the wkhtmltoimage and get the image back via ajax.
The new layout of YouTube added a background random-noise which I like very much, having seen almost exactely the same effect on other sites, so I plan to use the same technique in my webpage prototypes, or at least have this "trick" in my toolbox for future use.
The image is like this (taken from http://g.raphaeljs.com/barchart.html):
Now Youtube accomplishes the (embarrassingly identical) same effect by embedding the image in source code:
(on Youtube main page, right click background to display it, then right click the image and "display image properties" [ffox]):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAACVCAAAAAB0....lotsofdata
I tried to discover where this line of code is in the source code, but due to the dynamic creation, I couldn't.
So, my question is:
"Is there a way to apply a tiled background to a page, using a png image generated algorithmically CLIENT-SIDE?" (preferrably with javascript)
I am very beginner in webdev and javascript, but I like to base my learning around defined problems to be solved, so this would be a nice way to learn something
Thanks for reading!
UPDATE:
For anyone interested in tile texture generation using javascript, I found this, which seems very interesting:
http://somethinghitme.com/projects/canvasterrain/
http://somethinghitme.com/projects/canvasterrain/js/canvasTerrain.js
To generate image client-side, I suggest you to have a look to HTML5 canvas element.
You can draw on a canvas with Javascript (even if the canvas element is hidden), and so generate anything you want (including a simple noise tile).
Resource to learn Canvas drawing : https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
After that, you can export your canvas as URL with the method toDataURL (a string like "data:image/png;base64....") which is interpreted by browsers like a traditionnal url for an image, so you can set it as css background for your body element.
Warning 1 : Canvas is supported by all modern browsers and you can emulate it on IE with ExplorerCanvas - but I don't know if ExplorerCanvas support .toDataURL()
Warning 2 : Canvas is resolution-dependant, so I suggest you to generate a little tile (32*32, or 64*64) and repeat it
Edit : An example of tiled background : http://jsfiddle.net/SfzPc/12/
Edit 2 : An completed example with a noisy background : http://jsfiddle.net/SfzPc/14/
You can use CSS to display this image:
#someimageselector {
background: white url('data:image/png;base64,iVBOR...lots of data') repeat scroll left top;
}
You can change the initial color of your background by editing the value white.
To set CSS with JavaScript, set the background property of an element:
document.getElementByID("someimageselector").background = 'white url(data:image/png....';
There are two jQuery plugin libraries that do exactly what you are looking for: NoiseGen and Noisy. Haven't used either yet but they both look pretty good.
NoiseGen
Project: http://primegap.net/2011/10/20/noisegen-generate-background-noise-with-jquery/
Demo: http://www.lucaongaro.eu/demos/noisegen/
Noisy
Project: https://github.com/DanielRapp/Noisy
Demo: http://rappdaniel.com/other/noisy-sample/
Fyi: Base64 is binary data represented as a string.
Most likely the original image still came out of Photoshop and was later encoded into Base64.
This technique helps having less http-requests per page view, as the actual image data can be saved and cached inside the css or html document.