I have dropzone working no a site but once in a while when I drop an image in it turns to landscape. This seems to happen more on larger images. I cannot find anyone with this problem so I was hoping someone here has dealt with this issue.
Upon further testing I have narrowed this down to only images with the extension JPEG, if I re-save as JPG then it is fine. Any ideas?
Thanks
Use SimpleImage.
change vertical or horizontal mobile image into properly oriented.. So
that any vertical mobile store in vertical only.. Use simple image
auto_orient funtion. Get Simple image from :
https://github.com/claviska/SimpleImage
$img = new SimpleImage();
$imagenm="Bombay Realty.jpg"; // vertical mobile image store horizontally..
$filepath='processed/'.$imagenm;
$img->load($filepath)->auto_orient()->save($filepath);
Just in case anyone comes across this I figured I would answer it now that I have worked though it. I found in the EXIF data that the orientation needed to be locked in before converting the image. Even though the browser or email client rendered it upright it saved rated 90 degrees. By running the following php exec before doing anything with the image it made sure it was upright.
exec("convert -auto-orient {$this->s_tmp} {$this->s_tmp}");
$this->s_temp obviously being the temporary image uploaded and this of course is using image magicks -auto-orient
Related
I picked up some work updating images on a website that someone else had created managed previously.
I determined how it was laid out enough to get what needed to be done done.
However, two images I added are showing in landscape orientation on the preview page but when the image is clicked on it shows properly in the portrait orientation.
www.artbyheenan.com/art.php
Its the first two images, if anyone can take a look and give me some input I'd appreciate it.
Initially I thought it may have been the image size as it was rather large and I resized it to 200kb but still the same.
It has to do with the images meta/exif data and a known issue in the browsers.
- https://github.com/GoogleChromeLabs/squoosh/issues/299
- Chrome Image EXIF Orienation Issue
The best solution right now is to re-save the image in photoshop or something similar.
The problem is that your images have EXIF data that has rotation set to 90º CCW.
If you delete the EXIF data, they will display properly.
You can do that here: Remove EXIF data online
I'm working on a PHP project where the user can upload an image and preview that image on a product (Ex. mug, pillow). I have done almost all that is required to implement this except wrapping the uploaded image around the product image. I have done extensive search on that, but could not find any help. Could anyone show me the way please ?
At the moment I am using the GD library.
Best example for what I need is : http://www.zazzle.com/polyester_throw_pillow_16_x_16-189271445174968378
I am not sure how they are doing that.
EDIT :
My area of interest is how they are blending the image according the product shape
I think it's answered here: Merge two PNG images with PHP GD library
Just make sure that the image uploaded by the client is smaller than your product image
working on a upload image feature for my custom CMS.
I have completed the feature, but have an image when uploading images from mobile devices. Only tested on IOS so far but the issue is:
If the user selects to take a picture and does so in portrait, when the image is saved it is rotated -90 degrees.
It is however fine in landscape. After some research I have found that it uses the exif data from an image and looks at the rotation. Is there a way to ignore this information and keep the image as it was taken?
Using a class to upload images I found on GitHub called bulletproof:
https://github.com/samayo/bulletproof
The link to the actual class:
https://github.com/samayo/bulletproof/blob/master/src/bulletproof.php
And this is the upload part from that:
$moveUploadedFile = move_uploaded_file($fileToUpload["tmp_name"], $this->uploadDir . "/" . $newFileName);
Thanks, Craig.
This PHP class doesn't apply any image rotation. A search for imagerotate() fails.
So this is not PHP related and you might ensure that by testing the image upload from another, non-iOS client.
Then, you might want to find out, if iOS has a setting to send the native, unmodifed image or if you have to apply some "rotate"-correction on iOS-device side to get a correct rotation before sending.
In other words: i believe the image is transformed on IOS device side, before the image is send.
iOS PNG Image rotated 90 degrees
iOS4 landscape photos sideways in e-mail
I have an image gallery that loads thumbnails dynamically using a php glob of images (jpegs) in a directory.
On one particular gallery, the thumbnails are loading with the header 'image/png' instead of 'image/jpeg' and showing up as 1x1 PNG images instead of the 370x370px full thumbnails they're supposed to be.
I have used the php gd library to generate the thumbnails and they work in 99% of other cases, just not this particular case.
I cannot discern any particular difference between these images and any others on the site, I really am stumped.
When the resource are viewed in chrome, the following is shown when looking at any of the images:
filename.jpg
Dimensions 1 × 1
File size 67 B
MIME type image/png
URL http://mydomain.com/img.jpg
Any help would be appreciated as to why these images are being sent with a png mime type as opposed to jpeg.
This is the image resizer class I am using:
http://pastebin.com/mMwMTKSF
With the thumbnails being generated via load, resizeLong, crop and save methods (in that order).
I can only guess that the image types are wrong in the original images but I've even gone and manually made some thumbs in irfanview to no avail, they're still being sent as PNG's and I have no clue why...
I can paste any code as it's needed.
I've just figured it out. After AGES of puzzling - it's purely because I had an adblocker running on my browser and it was replacing the images with a 1x1px PNG.
The name of the gallery that I was using was 'Adverts' because it was showcasing some ads I'd done.
The more you know.
For anyone else encountering this strange phenomena, this is what was sent as the image instead:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==
so that anyone who now types that into google will see this post and realise how silly they were.
I've searched for ages for a solution, but I can't really find the solution to fit my needs.
So here's the story. Im creating a website and I really want to add watermarks to the downloaded images.
Yesterday I was browsing in a website called 9gag. If you haven't heard this website before, its a comic based website, and I found out that when you download an image, or access an image from anywhere else except their website, there's a 'watermark/banner' at the bottom of the image.
For example take this image:
link , notice no banner at the bottom of the image.
If you right-click, 'Copy image URL' , you get this link: image . See the banner now?
Im very confused on how they do it, and it would be great if we could use this on our websites.
Anyone with any ideas? Is it using any type of CGI?
P.S: I Wasn't sure what tags to add, So if anyone knows a better tag combination, please do edit it.
This effect is just a css trick. The image itself actually contains the watermark at the bottom, but the image tag is wrapped in a block that hides (overflow:hidden) the bottom 42 pixels of the image when it's being displayed in the page.
There are other things you can do that are more sophisticated (for instance, have the image served via a php script and comparing the http referer
header("content-type: image/jpeg");
if (!isset($_SERVER['HTTP_REFERER'])){die("alert('Restricted Access!');");};
$_u=parse_url($_SERVER['HTTP_REFERER']);
$_u=preg_replace("/(www.)/i","",strtolower($_u['host']));
$_i=$_SERVER['HTTP_HOST'];
$_i=preg_replace("/(www.)/i","",strtolower($_i));
if ($_u != $_i){
//handle this with gd or redirect
}
) but this will only work if someone tries to load the image from a different website or if they go to the image url... generally save-as will save the image from the browser's cache, so the css trick might be the best option you have (or a combination of these options). Fundamentally keep in mind that anything you show on the web can be captured (the code above isn't foolproof, and you can always prtsc).
GD library of php will help you doing that.
You'll need to create a new image using imagecreate function but adding some more "space" to the original size. Example: if I have an image of 200x200 (which you can retrieve using gd functions too) you'll need to create a 200x220px image using that function
Fill the new image with that gray color using imagefilledrectangle function
Copy the original image into the new one using imagecopy
Set the header's content type to image/type png gif etc..
Output to the image using imagepng or any other function that has the format you want.
I've had success with JQuery Watermark:
Jquery Watermark