I am using php to rotate a photo on server. When I click a button 'rotate' I use ajax to load php page, perform rotation and refresh div with new image.
Everything works and the image has been rotated with the correct dimensions but the image itself hasn't rotated. If i hit f5 to refresh page, the image is displayed corrected. Does anyone know why the image isn't displayed correctly before refreshing.
$photo_path= $result['photo_path'];
$src = imagecreatefromjpeg($photo_path);
$rotate = imagerotate($src, 90, 0);
#unlink($photo_path);
imagejpeg($rotate,$photo_path);
imagedestroy($src);
imagedestroy($rotate);
Any ideas?
try this,
$file="myimage.jpg";
$file1 = imagecreatefromjpeg($file);
$file2 = imagerotate($file1, $degrees, 0);
file_put_contents("newimage.jpg",$file2);
Maybe use JavaScript as this is a client side problem.
Update: this is very basic but test it out and see if it works;
<script>
function changeImage(o){
o.src = '//' + (new Date()).getTime(); // time to help stop caching
}
</script>
<img src="//" onclick="changeImage(this)" />
I managed to solve it. Thanks for all the help.
What i did was just give the photo a new file name and update mysql table. Must have something to do with the image being cached and I was keeping the new rotated file with the same file name.
Thanks again.
You can add a question mark and a random number after the extension of the file and this makes the user browser ignore the local cache, and reload the file. For example:
myimage.png?789 <- Random number
Related
I have 2 different scripts for handling images:
The first one is a watermark script for watermarking images on the fly:
$imgpath=$_REQUEST['filename'];
header('content-type: image/jpeg');
$watermarkfile="assets/img/logo_variations/logo_watermark_75.png";
$watermark = imagecreatefrompng($watermarkfile);
list($watermark_width,$watermark_height) = getimagesize($watermarkfile);
$image = imagecreatefromjpeg($imgpath);
$size = getimagesize($imgpath);
$dest_x = ($size[0] - $watermark_width)/2;
$dest_y = ($size[1] - $watermark_height)/2;
imagecopy($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height);
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);
So the image URL for a watermarked image is: http://example.com/watermark.php?filename=assets/img/temp/temp_share.jpg or since I'm using mod_rewrite to "pretty up" my URL: http://example.com/watermark/assets/img/temp/temp_share.jpg.
Works like a charm and my reason for doing so like this is because this is on a modeling website where I want to display the images without watermarks but I use a jquery script to change the image source of the image gets right clicked(assuming a user is trying to save the image).
The script only changes the source of any image with a class of img-protected.
I've written it to ignore any image with watermark in the URL so that it doesn't try to change the already watermarked image which would result in a url like: http://example.com/watermark/watermark/img.jpg which would result in a broken image. The other part is written to remove http://example.com from the original source so I don't end up with http://example.com/watermark/http://example.com/img.jpg.
$('.img-protected').on('mousedown', function (event) {
if (event.which == 3) {
if(this.src.indexOf("watermark") > -1) {
return false;
}
else {
src = this.src.replace('http://example.com/','');
this.src = 'http://example.com/watermark/' + src;
}
}
});
All of this works exceptionally well until I added another image handling script:
I'm using TimThumb.php which is an on the fly image resize script I use for creating gallery icons instead of uploading an icon and a full size image(this is how I wish to keep doing so as well).
The problem I am facing is this:
If I have an image that is being turned into a thumbnail using TimThumb.php which I renamed to thumb.php on my server the URL is http://example.com/thumb.php?src=gallery/goth/industrial_brick/5361ae7de9404.jpg&w=350&h=500a=c&s=1&f=11 which gives me an icon for 5361ae7de9404.jpg.
All of my icons have a class of img-protected which means on right click the above URL is going to be changed to the watermarked one.
This is where it fails.
The outputed URL when right clicked is http://example.com/watermark/http://www.example.com/thumb.php?src=gallery/goth/industrial_brick/5361ae7de9404.jpg&w=350&h=500a=c&s=1&f=11 which results in a broken image.
I manually tried making the URL into http://example.com/watermark/thumb.php?src=gallery/goth/industrial_brick/5361ae7de9404.jpg&w=350&h=500a=c&s=1&f=11 to see if that would change anything but it still results in a broken image.
What I need is to be able to also watermark the generated icons from thumb.php using watermark.php.
Is there a way to combine these two scripts or a workaround to make this work?
I'm at a complete loss here.
EDIT: I am fully aware that advanced users can still acquire the non watermarked image since it's already been downloaded to there device, but I don't expect a high volume of users to visit this particular website as this is simply a local models portfolio.
As per the question title, I am using the Intervention package with Laravel. I have the following code in my routes file:
Route::get('resize-image/{pathkey}/{filename}/{w?}/{h?}', function($pathkey, $filename, $w=100, $h=100){
$cacheimage = Image::cache(function($image) use($pathkey, $filename, $w, $h){
switch($pathkey){
case 'tour-images':
$filepath = 'upload/tour-images/' . $filename;
break;
}
return $image->make($filepath)->resize($w,$h);
},10,true); // cache for 10 minutes
return Response::make($cacheimage, 200, array('Content-Type' => 'image/jpeg'));
});
When I call an image using something like: /resize-image/tour-images/139326085726.jpg/1100/400 it works nicely, then as soon as I reload the page, I get the error:
The image xxxx cannot be displayed beacause it contains errors
If I change the dimensions (so forcing it to resize the image again), it works, then.. same problem. When I reload the page, it should be the cached image that is loading this time... but it's not working. What is happening?
OK, now it's working. If I remove 'true' then it works, ie. change this line of code:
},10,true); // cache for 10 minutes
to:
},10); // cache for 10 minutes
Not sure why though... I can't find any info that tells me what the 'true' is referring to (I copied this code from a video with little in the way of explanation). If anyone knows what this means, please leave a comment.
I have been stucked at some point where client needs to change the frame image over the product image. Means if image size is 200 * 400 then image frame will apply on the product image and if the product image is 400*200 then also same frame will be apply over the product image without any manual information(dynamically). I think it is possible using the imagemagick and for that I have found this url (http://www.fmwconcepts.com/imagemagick/picframe/index.php) but it is using command line But I want it without command line.
I am making something like the given page :- url: http://fineartamerica.com/products/conversations-laura-sue-canvas-print.html
Hope I have explained my problem well. Please help me out.
Thanks for your support in advance.
i had a similar requirement following code worked for me
$over = new Imagick($_SERVER['DOCUMENT_ROOT'] .'ks/new.png'); // load frame
$pic = new Imagick($_FILES['pic']['tmp_name']); // load image
$pic->resizeImage(1299,1722,Imagick::FILTER_LANCZOS,1); // resize your image to the size of your frame
$pic->setImageFormat ("png"); // set formate of final image
$pic->compositeImage($over, Imagick::COMPOSITE_DEFAULT, (((($pic->getImageWidth()) - ($over->getImageWidth())))/2), (((($pic->getImageHeight()) - ($over->getImageHeight())))/2));
$name=rand(1,10000000000);
file_put_contents ("pictures/$name.png", $pic);
$pic->destroy();
Look at http://php.net/manual/en/function.getimagesize.php, no imagemagick needed
But to use external url, you should enable url_allow_fopen = true in you php ini (not sure if run time works)
Take a look at the Imagick::frameImage() function.
$image->frameImage("#aabbcc", 20, 20, 5, 5);
would add a 20px blue frame around your image with 5px bevel.
Iam working on a project , which involves fetching images from various websites and displaying a Thumnail or resized version of orignal image.
As i will be fetching many images at time , this takes more time , As Orignal image files will be loaded.
What i need is given an image url , i need resized version of that image file? So that i need not download the Large orignal image file...
for example : orignal image : 500X800 some 500kb
what i need is : 100X150 some 100kb image file..
Is it possible using Jquery? OR PHP?
Are their any functions like imagecopyresampled(PHP) in Jquery or any plugins?
Well, the big file needs to be downloaded at one point to create the thumbnail.
What you can do, through JQuery, is ask your server for the thumbnail, the server downloads the file, creates the thumbnail and sends back to the client the URL of the thumbnail when the resizing is done. This way, the client will gradually receive thumbnails as they are ready.
Edit After experimenting a bit, I found out that as soon as an img requests a picture, even if you dynamically remove its src attribute, the download continue.
So I decided to write a sample code (there's not much validation and it only works for jpeg, adding the other types would be really easy though). The solution is divided in 3 parts:
HTML
First, I used an empty div with some specific attributes to let jQuery what to load. I need to apologize to Nuria Oliver, she had the first "big picture" I could find on the net. So, here's a sample div:
<div class="thumbnail" data-source="http://www.nuriaoliver.com/pics/nuria1.jpg" data-thumbnail-width="100" data-thumbnail-height= "200"/></div>
I use thumbnail as class to be able to find easily the divs I want. The other data parameters allow me to configure the thumbnail with the source, width and height.
JavaScript / jQuery
Now, we need to locate all these divs requesting thumbnails... using jQuery it is pretty easy. We extract all the data settings and push them in an array. We then feed a PHP page with the query and wait for the response. While doing so, I'm filling the div with some HTML showing the "progress"
<script type="text/javascript">
$(".thumbnail").each(function() {
var img = $(this);
var thumbnailWidth = img.data("thumbnail-width");
var thumbnailHeight = img.data("thumbnail-height");
var thumbnailSource = img.data("source");
var innerDiv = "<div style='width:" + thumbnailWidth + "px; height:" + thumbnailHeight + "px'>Loading Thumbnail<br><img src='loading.gif'></div>";
img.html(innerDiv); // replace with placeholder
var thumbnailParams = {};
thumbnailParams['src'] = thumbnailSource;
thumbnailParams['width'] = thumbnailWidth;
thumbnailParams['height'] = thumbnailHeight;
$.ajax({
url: "imageloader.php",
data: thumbnailParams,
success: function(data) {
img.html("<img src='" + data + "'>");
},
});
})
</script>
PHP
On the PHP side of things, I do a quick test to see if the picture has already been cached (I'm only using the file name, this should be more complicated but it was just to give you an example) otherwise I download the picture, resize it, store it in a thumbnail folder and return the path to jQuery:
<?php
$url = $_GET["src"];
$width = $_GET["width"];
$height = $_GET["height"];
$filename = "thumbnail/" . basename($url);
if(is_file($filename)) // File is already cached
{
echo $filename;
exit;
}
// for now only assume JPG, but checking the extention should be easy to support other types
file_put_contents($filename, file_get_contents($url)); // download large picture
list($originalWidth, $originalHeight) = getimagesize($filename);
$original = imagecreatefromjpeg($filename); // load original file
$thumbnail = imagecreatetruecolor($width, $height); // create thumbnail
imagecopyresized($thumbnail, $original, 0, 0, 0, 0, $width, $height, $originalWidth, $originalHeight); // copy the thumbnail
imagedestroy($original);
imagejpeg($thumbnail, $filename); // overwrite existing file
imagedestroy($thumbnail);
echo $filename;
Browser
So, what does it do exactly? In the Browser, when I open the page I first see:
And as soon as the server is done processing the image, it gets updated automatically to:
Which is a thumbnail version, 100x200 of our original picture.
I hope this covers everything you needed!
PHP Thumb is a good plugin it worked for me and easy to operate.
And the best part is there are many options to select about the output file like its quality, max width for potrait images , max width for landscape images etc..
And we can set permissions like block off server requests, block off domain thumbnails.. etc
Note: this was actually posted by someone , as an answer to this question..But it was deleted.So iam reposting it, as it was useful.
for this to work you need to do some actual image processing which you cant do with js, so some server side language is needed.PHP is an option
If you are not interesting in obfuscating the image source, you may very well rely on an external tool like http://images.weserv.nl/ which takes an original image and allows you to request it in a different size.
If you end up not relying on a global CDN, at least sort out proper caching. Last thing you want to do is resize the same image over and over again for subsequent identical requests - any benefit of image's lower size will probably be negated by processing time.
I'm building a website which uses PHP GD to create images based on user inputted data.
So for instance I'd have something like this:
$image = imagecreate(125, 125);
$blue = imagecolorallocate($image, 0, 0, 255);
imagepng($image, "1.png");
imagedestroy($image);
header("Location: ../index.php");
To generate the image 1.png and go back to the index of the site.
On the index I'm simply displaying the code if the file exists with some more simple php
<?php if(!file_exists("php/1.png"))
echo ("<center><h2> No panels added!</h2></center>");
else
echo('<img class="p_image" src="php/1.png">');
?>
The problem I'm running into is that the browser will cache the last 1.png generated, even if the user deleted it and made a new one, and display that. Is there any way I can stop this from happening without having to rename the file every time?
Thanks in advance!
Just append a timestamp to the filename. That will essentially make it unique and prevent caching:
echo('<img class="p_image" src="php/1.png?'.time().'">');