I have a sort of a canvas on my site, (not canvas though for the need of support in IE) where images are loaded to and modified.
At the end of the process I'd like to take all the files used in the canvas and connect them into a (bigger) jpg.
My thoughts were to collect all the relative positions of the images and use it to reposition them on the new file.
I should add as well that one of the files is a background image.
layers should not count more than lets say 4 including the background.
on top of that i needed to jpg-ize a text layer as well but for that I have a php script, if anyone has an efficient way to do it I'll be glad to see it as well.
Look at GD or ImageMagic PHP extensions. Both allow to do that.
Here is an example of how to do image overlays in imagemagick. You can specify the scaling and position of the overlay in the convert parameters.
Related
I'm building a responsive site using Zurb Foundation.
I have a PHP script which will resize and caches an image using gdlib if you append a query string with new dimensions in the URL. For example to resize an image to 300px wide:
http://www.mydomain.com/images.php?imgfile=path/to/picture1.jpg&w=300
I am also using some HTACCESS rewrite rules to make this URL pretty and avoid having a query string. So this URL gives the same result as above:
http://www.mydomain.com/img/300w/path/to/picture1.jpg
The PHP file performs some simple arithmetic to constrain by width or height, checks if the resized version is already in cache, if so outputs it, if not, resizes the images, saves it using imagejpeg and outputs it with header("Content-type: image/jpeg");
I am also using Zurb Foundation and want to use the interchange javascript like so:
<img src="http://www.mydomain.com/img/300w/path/to/picture1.jpg"
data-interchange="[http://www.mydomain.com/img/300w/path/to/picture1.jpg, (default)],
[http://www.mydomain.com/path/to/picture1.jpg, (medium)]">
However, this does not seem to work. Only the 300px is shown for both breakpoints. After much testing it's clear that only what's in the src attribute is taking. The images passing through the resize script don't work. This is true even if it should be using the medium image which is the direct path the full size image.
I tried to debug the interchange javascript, but am not that skilled in Javascript.
Any help or advice would be appreciated. Someone must be trying to using dynamically resized images with PHP using interchange.js on a responsive site.
There is no need for debugging interchange, it works pretty well.
First, have you included the foudation.js file before interchange.js (dependancy) ?
Tip for debugging: try with default/medium/small and use different images (ex: different color rectangles) to quickly notice changes.
Also, in your example, there is only one path (see below) and you're having a "default" named-query. What is the point of loading the same image twice ? You might want your default size to be in src="", and your (typically) bigger sizes thereafter ?
What interchange does is letting the src"(ex: small.jpg)" loads as usual (hence it's displayed without js enabled) and THEN loads a bigger image depending on the named-query/media-query. So perhaps you could generate all your image size on upload (with no check for size existance needed). At least, it's the way I do it with wordpress.
<img src="http://www.mydomain.com/img/default-size/300w/path/to/picture1-small.jpg"
data-interchange="[http://www.mydomain.com/img/medium-size/800w/path/to/picture1-medium-sized.jpg, (medium)],
[http://www.mydomain.com/img/large-size/1200w/path/to/picture1-large-sized.jpg, (large)]">
As I can see on the Zurb Foundation Github repo Issues there may be a problem with url containing parameters and their regular expression
I'm trying to upload some photo from a mobile using jquery mobile and php but after uploading my photo it's always in landscape format even if my photo is in portrait format on my iphone !
So i can't know which one must be rotated or no .
Thanks
I had this same problem. My solution was a little quick and dirty but here you go:
Write a function to be called when the image loads, check to see if the image is going to rendered in landscape.
$(".imgTile").load(function(){
if(this.width>this.height){
$(this).css("transform","rotate(90deg)");
$(this).css("top",".7em");
$(this).css("left","-.5em");
}
}
A couple notes: I found I had to do some repositioning to get the rotated image to fit properly into the listview (hence the setting of top and left properties) so you may need to tweak this for your needs. Second, there are different css "transform" properties for different browsers, so you may need to set each to have cross browser support. Here's a guide on those properties http://www.w3schools.com/cssref/css3_pr_transform.asp
EDIT: I took some time and came up with a much more solid solution.
First, use php to read the exif tags:
$exif=exif_read_data("uploads/$fileExtension.jpg",0,true);
$orient=$exif["IFD0"]["Orientation"];
Some research into the EXIF standard reveals that the three cases that the iPhone will generate are:
1-- requires no rotation
3-- requires 180 deg. rotation
6-- required 90 deg. rotation
Then use php's shell_exec to run the following shell script, which uses imagemagick to destroy the EXIF headers, and physically rotates the image the specified amount:
#!/bin/bash
for i in $[filename]
do convert -rotate $[number of degrees] $i $i
done
mogrify -strip $[filename]
Now, the image will be correctly oriented everywhere, and browsers that do read EXIF headers won't show it any differently.
The only thing left to do is execute the script with the correct arguments based on the tag value.
Hope this helps!
I'm working on a website that has many tiled images using JQuery's Masonry plugin. The tiles are all uniform in size, but the images contained within them can be a number of sizes.
I was wondering if there's a good recommendation for a PHP plugin / script that can take an incoming image of any size, and do whatever is required to fit in a certain sized box (have automatically resize, crop, insert black space, etc.)
EDIT:
Thanks for the Php options. is there anything in the JQuery realm too?
This script would fit your need as well :
http://www.phpcodester.com/2011/01/php-function-to-resize-image-to-fit-in-a-standard-box-without-distortion/
If you need to modify something, php's image functions are always named imagesomething($resource,x,y,etc.)
Hope this helps.
You should have a look at TimThumb: http://www.binarymoon.co.uk/projects/timthumb/
I'm creating a web app that allows users to specify an image url to display an image along with their submission.
To avoid some potentially large images and odd sizes, i'd like to use PHP to limit/resize the image before it gets output to the browser (I know i could use max-width in CSS but this is unnecessary downloading)
Is this possible?
PHP has a library named GD. It's fairly easy to check the size of an image with the getimagesize() function.
You can find the complete code for it with 2 module/extensions: http://www.fliquidstudios.com/2009/05/07/resizing-images-in-php-with-gd-and-imagick/
a comparison of them can be found here: http://dreamfall.blogspot.com/2008/02/php-benchmarks-gd-vs-imagemagick.html which may be of use if you want optimize features.
I want to mimic the bing video preview functionality, with a thumbnail preview, then onMouseOver, load and play a video file. I plan to use VideoJS (html5 + flash) for the video playback. I need to use ffmpeg to produce these video files.
How can I create a mp4 preview with video only, which contains 1s of every other minute of the full clip, and shrink resolution to a fixed width (maintaining aspect ratio, preferably with zoom crop) using php + ffmpeg command line?
I'm assuming it can be done somehow along the lines of cutting 1s clips, then combine the smaller clips, and re-encode for a final rescaled output.
*Edit: Using ffmpeg is a design requirement. Pulling out 1s clips, should be fairly easy, but combining them seems to be somewhat complex with ffmpeg. I don't want cycling thumbnails, I want a video preview which contains a number of 1s clips. Eg. runtime in seconds: 100-101, and 200-201 combined in a heavily compressed clip. I am asking for a command line example of how to do this in an efficient manner.
One way to do this in Windows (or wine) would be to use an Avisynth script. This would allow you to do all your desired transformations in one step. It's been a little while since I've used Avisynth but a very simple script might look like:
DirectShowSource("C:\file\to\encode.avi", audio=false) # Or another source filter
SelectRangeEvery(1440, 24) # outputs 24 frames every 1440 frames
BilinearResize(320,240) # resize to your desired resolution
Crop(...) # crop to reach desired aspect ratio
This could be extended to support various framerates and aspect ratios instead of hardcoding everything. The resulting .avs file can then be used as an input file to ffmpeg, provided that it has been compiled with --enable-avisynth.
I've an approach and i think that will work...
Using ffmpeg you can get thumbnails of the video at specific intervals.
So i will take about 5 to 10 thumbnails in the interval of 2 seconds and store them on my server with a unique name that identifies the video.
So when I mouse over i call the function which will load these images sequentially(which makes the user feel the video is fast forwarding..)
But in this format, we can't play sound when we mouse over ..
I don't know whether this is good but i know this will work..
Update:
I think it will be better to create a video using ffmpeg using the extracted images and play them while we mouse over.. This will be quite faster than loading a sequence of images. ffmpeg can be used to create a new video from a list of images.
I managed to do this now, by pulling out 1s clips, and convert them to mpeg. Then combine these mpeg files, by appending them into a single file. Then convert til mpeg file to mp4