I want to skew an image into a trapezoidal shape. The left and right edges need to be straight up and down; the top and left edges need to be angular. I have no idea what the best way to do this is.
I'm using GD Library and PHP. Can anyone point me in the right direction?
Thanks,
Jason
Try this:
<?
// Set it up
$img_name = "grid.jpg";
$src_img = imagecreatefromjpeg($img_name);
$magnify = 4;
// Magnify the size
$w = imagesx($src_img);
$h = imagesy($src_img);
$dst_img = imagecreatetruecolor($w * $magnify, $h * $magnify);
imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $w * $magnify, $h * $magnify, $w, $h);
$src_img = $dst_img;
// Skew it
$w *= $magnify;
$h *= $magnify;
$new_lh = abs($h * 0.66);
$new_rh = $h ;
$step = abs((($new_rh - $new_lh) / 2) / $w);
$from_top = ($new_rh - $new_lh) / 2 ;
$dst_img = imagecreatetruecolor($w, $new_rh);
$bg_colour = imagecolorallocate($dst_img, 255, 255, 255);
imagefill($dst_img, 0, 0, $bg_colour);
for ($i = 0 ; $i < $w ; $i ++)
{
imagecopyresampled($dst_img, $src_img, $i, $from_top - $step * $i, $i, 0, 1, $new_lh + $step * $i * 2, 1, $h);
}
// Reduce the size to "anti-alias" it
$src_img = $dst_img;
$dst_img = imagecreatetruecolor($w / $magnify * 0.85, $new_rh / $magnify);
imagecopyresampled ($dst_img, $src_img, 0, 0, 0, 0, $w / $magnify * 0.85, $h / $magnify, $w, $h);
header("Content-Type: image/jpg");
imagejpeg($dst_img);
?>
I found this thread (translated Dutch -> English) discussing the same thing. Looks like it might be what you're after. I think it's clear that you can't skew with GD without writing your own function to do so. If you have ImageMagick available, you might find this to be easier to achieve.
Good luck.
Make a nested loop for x = 0 to width and inside y = 0 to height, get pixel (rgba) at that coordinate, calculate new xy for skew rotation (using sine cosine, you have to have skew origin for angle calculation) and then copy pixels to empty image. Just high school math
Related
I have a website I monetize with numerous original pictures on it, I want people to visit the website to see the original pictures and have search engines only show the pictures with transparent watermarks.
The following is an example of what I mean by a transparent watermark. Except of course, I replace "Test!" with the company name.
Here's the PHP code I created so far:
<?php
$txt = "TEST!";
header( "Content-type: image/jpeg", true );
$w = imagefontwidth(5) * ( strlen( $txt ) + 1 );
$h = imagefontheight(5) * 2;
$i2 = imagecreatetruecolor( $w,$h );
imagesavealpha( $i2, true );
imagealphablending( $i2, false );
imagefill( $i2, 0, 0, imagecolorallocatealpha( $i2, 255, 255, 255, 127 ) );
imagestring( $i2, 3, 10, 10, $txt, imagecolorallocate( $i2, 255, 0, 0) );
$i = imagecreatefromjpeg( "someimage.jpg" );
imagecopyresized( $i, $i2, 2, 2, 0, 0, $w * 5, $h * 7, $w, $h );
imagejpeg( $i, null, 100 );
imagedestroy( $i );
imagedestroy( $i2 );
?>
$i2 is the resource variable for the image box in which I added the text, and $i1 is for the large image to place the text on. $w and $h represent width and height of the text image box. This code is able to produce the text on top of the image without the background box showing, but it doesn't produce the bump-map effect like what is shown in the above image.
Can anyone guide me as to what functions, mathematics or code I need to use to create the bump-map effect?
I feel my solution requires special manipulation of a block of pixels but I don't know how to do it for this effect.
I also want to stick with the PHP GD Image library.
I'd recommend using a semi-transparent PNG and adding it as a watermark rather than using the imagestring functions.
With the imagestring functions you'd theoretically needs to create two strings, one slightly higher and to the left than the other, and then somehow calculate the pixels that where both the strings are present and make that transparent. This will then mean the left-over parts would be black / white and give that 3d effect.
Example 1
If the watermark is the same for each image, then you can use a semi-transparent PNG. The benefit of this is that it allows for far more effects, and as a result a better result.
<?php
// Watermark will take up 80% of the photo's width
$size = 80;
$im = imagecreatefromjpeg(dirname(__FILE__) . '/photo.jpg');
$oi = imagecreatefrompng(dirname(__FILE__) . '/watermark.png');
$w1 = imagesx($im);
$h1 = imagesy($im);
$w2 = imagesx($oi);
$h2 = imagesy($oi);
$w = $w1 - (($w1 / 100) * (100 - $size));
$h = ($w * $h2) / $w2;
imagecopyresampled($im, $oi, $w1 / 2 - $w / 2, $h1 / 2 - $h / 2, 0, 0, $w, $h, $w2, $h2);
header('Content-type: image/jpg');
imagejpeg($im, null, 100);
imagedestroy($im);
Will produce the following output:
Original Photo / Watermark
Example 2
If the watermark needs to be different for each image, then you can use imagettftext to create the text using a font of your choosing (much better than imagestring but limited as to what effects you can do).
<?php
$size = 55;
$angle = 15;
$text = uniqid();
$font = 'BebasNeue.otf'; // http://www.dafont.com/bebas-neue.font
$im = imagecreatefromjpeg(dirname(__FILE__) . '/photo.jpg');
$w = imagesx($im);
$h = imagesy($im);
$text_colour_1 = imagecolorallocatealpha($im, 0, 0, 0, 99);
$text_colour_2 = imagecolorallocatealpha($im, 255, 255, 255, 90);
$box = imagettfbbox($size, $angle, dirname(__FILE__) . '/' . $font, $text);
imagettftext($im, $size, $angle, (($w - $box[4]) / 2) - 1, (($h - $box[5]) / 2) - 1, $text_colour_1, dirname(__FILE__).'/' . $font, $text);
imagettftext($im, $size, $angle, ($w - $box[4]) / 2, ($h - $box[5]) / 2, $text_colour_2, dirname(__FILE__).'/' . $font, $text);
header('Content-type: image/jpg');
imagejpeg($im, null, 100);
Output:
Imagerotate rotates the image using the given angle in degrees.
The center of rotation is the center of the image, and the rotated image may have different dimensions than the original image.
How do I change the center of rotation to coordinate x_new and y_new and avoid automatic resizing?
Example: Rotation around red dot.
First idea that comes to mind is to move the image so that its new center is at x_new, y_new rotate it and move back.
assumptions:
0 < x_new < w
0 < y_new < h
Pseudocode:
new_canter_x = MAX(x_new, w - x_new)
new_center_y = MAX(y_new, h - y_new)
create new image (plain or transparent background):
width = new_canter_x * 2
height = new_center_y * 2
copy your old image to new one to coords:
new_center_x - x_new
new_center_y - y_new
imagerotate the new image.
now you just have to cut the part that you are interested in out of it.
The right way to do it is rotate and then crop with right params of transformation.
Another way is move, rotate then move again (simpler math but more code).
$x and $y are coordinates of the red dot.
private function rotateImage($image, $x, $y, $angle)
{
$widthOrig = imagesx($image);
$heightOrig = imagesy($image);
$rotatedImage = $this->createLayer($widthOrig * 2, $heightOrig * 2);
imagecopyresampled($rotatedImage, $image, $widthOrig - $x, $heightOrig - $y, 0, 0, $widthOrig, $heightOrig, $widthOrig, $heightOrig);
$rotatedImage = imagerotate($rotatedImage, $angle, imageColorAllocateAlpha($rotatedImage, 0, 0, 0, 127));
$width = imagesx($rotatedImage);
$height = imagesy($rotatedImage);
$image = $this->createLayer();
imagecopyresampled($image, $rotatedImage, 0, 0, $width / 2 - $x, $height / 2 - $y, $widthOrig, $heightOrig, $widthOrig, $heightOrig);
return $image;
}
private function createLayer($width = 1080, $height = 1080)
{
$image = imagecreatetruecolor($width, $height);
$color = imagecolorallocatealpha($image, 0, 0, 0, 127);
imagefill($image, 0, 0, $color);
return $image;
}
Whenever I am trying to use the function imageflip(), it shows me the following message
Fatal error: Call to undefined function imageflip() in D:\xampp\htdocs\temp1\image_flip.php on line 6
Once I have called the imap_open function, even though, I already installed the imap extension and configured all. However, it still shows the same message.
imageflip() is only available after PHP 5.5. However, you can still define it yourself, as explained here (although if you plan to upgrade to PHP 5.5, it is not recommended to implement yours, or at least change the name to avoid duplication problems). For the sake of stackoverflow, I'll paste the code here:
<?php
/**
* Flip (mirror) an image left to right.
*
* #param image resource
* #param x int
* #param y int
* #param width int
* #param height int
* #return bool
* #require PHP 3.0.7 (function_exists), GD1
*/
function imageflip(&$image, $x = 0, $y = 0, $width = null, $height = null)
{
if ($width < 1) $width = imagesx($image);
if ($height < 1) $height = imagesy($image);
// Truecolor provides better results, if possible.
if (function_exists('imageistruecolor') && imageistruecolor($image))
{
$tmp = imagecreatetruecolor(1, $height);
}
else
{
$tmp = imagecreate(1, $height);
}
$x2 = $x + $width - 1;
for ($i = (int) floor(($width - 1) / 2); $i >= 0; $i--)
{
// Backup right stripe.
imagecopy($tmp, $image, 0, 0, $x2 - $i, $y, 1, $height);
// Copy left stripe to the right.
imagecopy($image, $image, $x2 - $i, $y, $x + $i, $y, 1, $height);
// Copy backuped right stripe to the left.
imagecopy($image, $tmp, $x + $i, $y, 0, 0, 1, $height);
}
imagedestroy($tmp);
return true;
}
And to use it:
<?php
$image = imagecreate(190, 60);
$background = imagecolorallocate($image, 100, 0, 0);
$color = imagecolorallocate($image, 200, 100, 0);
imagestring($image, 5, 10, 20, "imageflip() example", $color);
imageflip($image);
header("Content-Type: image/jpeg");
imagejpeg($image);
I haven't tried it, and the code isn't mine at all, but with some tricks you could adapt it to your needs.
i have this function that transforms image to trapezoid using PHP GD:
function perspective($i,$gradient=0.9,$rightdown=true,$background=0xFFFFFF) {
$mult=3;
$w=imagesx($i);
$h=imagesy($i);
$image=imagecreatetruecolor($w*$mult,$h*$mult);
imagecopyresized($image,$i,0,0,0,0,$w*$mult,$h*$mult,$w,$h);
imagedestroy($i);
$w*=$mult;
$h*=$mult;
$im=imagecreatetruecolor($w,$h);
$background=imagecolorallocate($im,($background>>16)&0xFF,($background>>8)&0xFF,$background&0xFF);
imagefill($im,0,0,$background);
imageantialias($im,true);
$nh=$h-($h*$gradient);
for ($x=0; $x<$w; $x++) {
$ni=(($rightdown) ? $x : $w-$x);
$p=intval($h-(($ni/$w)*$nh));
if (($p%2)<>0)
$p-=1;
$nx=intval(($p-$h)/2);
imagecopyresampled($im,$image,$x,0,$x,$nx,1,$p,1,$h-1);
imageline($im,$x,$h-1,$x,$h+$nx,$background);
imageline($im,$x,0,$x,-$nx-1,$background);
}
imagedestroy($image);
imagefilter($im,IMG_FILTER_SMOOTH,10);
$i=imagecreatetruecolor($w/$mult,$h/$mult);
imageantialias($i,true);
imagecopyresampled($i,$im,0,0,0,0,$w,$h,$w*$mult,$h*$mult);
imagedestroy($im);
return $i;
}
But i cant modify it to produce isosceles trapezoid, i think there needs just one small modification, but i cant figure it outh (i tried lot of things).
Can someone help?
Right, basically that code should generate the right values, but due to a bug has a lot of cludges in place to get a trapezium shape. The bug is that the copy of each line has the destination-y and the source-y values transposed. The source-y should always be 0, the destination-y should change.
There were also a few other small numerical bugs and double rounding at unnecessary points throwing off the results.
Also, the variable naming was atrocious, so I have rewritten it so that the entire function is clear.
Try the following:
function makeTrapeziumImage($image, $gradient, $rightToLeft = false, $background = 0xFFFFFF, $supersampleScale = 3) {
$originalWidth = imagesx($image);
$originalHeight = imagesy($image);
$supersampledWidth = $originalWidth * $supersampleScale;
$supersampledHeight = $originalHeight * $supersampleScale;
$supersampledImage = imagecreatetruecolor($supersampledWidth, $supersampledHeight);
imagecopyresized($supersampledImage, $image,
0, 0, 0, 0,
$supersampledWidth, $supersampledHeight, $originalWidth, $originalHeight);
$workingImage = imagecreatetruecolor($supersampledWidth, $supersampledHeight);
$backgroundColour = imagecolorallocate($workingImage, ($background >> 16) & 0xFF, ($background >> 8) & 0xFF, $background & 0xFF);
imagefill($workingImage, 0, 0, $backgroundColour);
imageantialias($workingImage,true);
$endHeight = $supersampledHeight - ($supersampledHeight * $gradient);
for ($x = 0; $x < $supersampledWidth; $x++) {
$cX = ($rightToLeft ? $supersampledWidth - $x : $x);
$dstHeight = $supersampledHeight - ((($cX + 1) / $supersampledWidth) * $endHeight);
$dstY = intval(($supersampledHeight - $dstHeight) / 2) - 1; // -1 required as zero-indexed
$dstY = ($dstY < 0 ? 0 : $dstY); // Rounding can make $dstY = -1
$dstHeight = intval($dstHeight); // Round the height after calculating $dstY
imagecopyresampled($workingImage, $supersampledImage,
$cX, $dstY, $cX, 0,
1, $dstHeight, 1, $supersampledHeight);
}
imagedestroy($supersampledImage);
imagefilter($workingImage, IMG_FILTER_SMOOTH, 10);
$resizedImage = imagecreatetruecolor($originalWidth, $originalHeight);
imageantialias($resizedImage, true);
imagecopyresampled($resizedImage, $workingImage,
0, 0, 0, 0,
$originalWidth, $originalHeight, $supersampledWidth, $supersampledHeight);
imagedestroy($workingImage);
return $resizedImage;
}
The essential mechanism of the inner loop, as before, is to take each column of pixels, along the x-axis and resize them over a gradient. It naturally creates an isosceles trapezium. In order to create a non-isosceles trapezoid, another gradient would have to be specified. Alternatively, a set of start and end y-values could be specified and the gradients calculated from them.
Whilst this example works along the x-axis, in either direction as before, it could just as easily work along the y-axis (or the image could be rotated 90 degrees, processed, then rotated back).
I'm trying to create thumbnail and resize image at the same time, so to be more clear here is the image that i'm trying to crop:
And i would like to cut out that red area.
Now my problem is that i'm resizing my image with html before croping so when i submit data to php i get incorrect values, like y = 100 when realy it could be y = 200 so i need to find a way to calculate my values.
I am using imagecopyresampled, maybe there is something better then this command?
Also my closest soliution was this:
imagecopyresampled(
$thumb, //Destination image link resource.
$src, //Source image link resource.
0, //x-coordinate of destination point.
0, //y-coordinate of destination point.
0, //x-coordinate of source point.
0, //y-coordinate of source point.
120, //Destination width.
160, //Destination height.
$image_width/2, //Source width.
$image_height/2 //Source height.
);
In this case it would cut out left corner but size would be not the same as my red box.
So i guess i need to get source width and source height right and everything else should fit perfectly, anyways i hope i make any sense here :)
EDIT Sorry i forgot to mention, $image_width and $image_height is the original image size
EDIT 2 To be more clear this is what i get when i resize with this code
$dimensions = getimagesize('testas.jpg');
$img = imagecreatetruecolor(120, 160);
$src = imagecreatefromjpeg('testas.jpg');
imagecopyresampled($img, $src, 0, 0, 0, 0, 120, 160, $dimensions[0]/2, $dimensions[1]/2);
imagejpeg($img, 'test.jpg');
Resized image size is correct, but as you can it doesn't look right.
I use something like this to scale images:
public static function scaleProportional($img_w,$img_h,$max=50)
{
$w = 0;
$h = 0;
$img_w > $img_h ? $w = $img_w / $img_h : $w = 1;
$img_h > $img_w ? $h = $img_h / $img_w : $h = 1;
$ws = $w > $h ? $ws = ($w / $w) * $max : $ws = (1 / $h) * $max;
$hs = $h > $w ? $hs = ($h / $h) * $max : $hs = (1 / $w) * $max;
return array(
'width'=>$ws,
'height'=>$hs
);
}
usage:
$getScale = Common::scaleProportional($prevWidth,$prevHeight,$scaleArray[$i][1]);
$targ_w = $getScale['width'];
$targ_h = $getScale['height'];
$jpeg_quality = 100;
$src = $prevdest;
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
//imagecopyresampled(dest_img,src_img,dst_x,dst_y,src_x,src_y,dst_w,dst_h,src_w,src_h);
imagecopyresampled($dst_r,$img_r,0,0,0,0,$targ_w,$targ_h,$prevWidth,$prevHeight);
imagejpeg($dst_r, 'assets/images/'.$scaleArray[$i][0].'/'.$filename, $jpeg_quality);
$complete[] = $scaleArray[$i][0];
When you say 'resizing with HTML', do you mean specifying the size using the width and height attributes of the img element? If so, this won't affect the dimensions of the file on the server, and you can still get those using getimagesize.
Something like this will return the source width and height of the image:
function get_source_size($the_file_path)
{
$imagesize = getimagesize($the_file_path);
return array('width' => $imagesize[0], 'height' => $imagesize[1]);
}
So after some time i was able to do it with my friend help, this is the script i used, maybe some one will need it in the future :)
private function crop($user, $post){
//get original image size
$dimensions = getimagesize($post['image_src']);
//get crop box dimensions
$width = $post['w'] * ($dimensions[0] / $post['img_width']);
$height = $post['h'] * ($dimensions[1] / $post['img_height']);
//get crop box offset
$y = $post['y'] * ($dimensions[1] / $post['img_height']);
$x = $post['x'] * ($dimensions[0] / $post['img_width']);
//create image 120x160
$img = imagecreatetruecolor(120, 160);
$src = imagecreatefromjpeg($post['image_src']);
imagecopyresampled($img, $src, 0, 0, $x, $y, 120, 160, $width, $height);
//and save the image
return imagejpeg($img, 'uploads/avatars/'.$user->id.'/small/'.$post['image_name'].".jpg" , 100);
}