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
Related
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
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
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 Googled a lot but no sufficient ans was found.
I need to place an image (900 X 5200 px) in one of my pages. As the image is sensitive, I need to prevent users from copying the image. I have an idea that can do this:
I will divide the image into pieces. Then the image grid will be loaded into some divs. So user won't be able to save the image. Or he/she will save only 1 square cm part of the whole image.
But this plan will not work if some small parts of the grid fails to load. So, I want to do another thing. I want to load the full image then cut the image into parts. Then show the parts altogether in divs.
This requires javascript. But I am confused how to start and need your help.
Now you know the matter, if you have better idea please share.
Thanks in advance.
The trick is simple. Create a div with the background being the image you want to display. Layer a div with a transparent image over it. When user goes to save the image, they get a blank. Program your server to not return "direct" requests for the image (so some clever chap can't just look at the css and retrieve the URL to the image).
Granted the image will still be in their cache but so would the sliced image so it won't make it impossible just more difficult for a determined person to retrieve the picture.
TL;DR Don't over engineer a solution, print screen will get around anything you do.
You are not going to be able to prevent people from copying this image. Plain and simple. Regardless of your best efforts, a simple PRT SCRN and paste into Paint will be enough.
Your best bet will be to not over engineer this and simply place a watermark and copyright notice on the page. Other options can include placing a transparent <div> over the top of the image so it cannot be right-click'ed and saved, but it still will not prevent the image from being stored in the user's cache. Or stop them from using developer tools or Firebug to find the source image.
You can do this with:
http://www.pixastic.com/lib/docs/actions/crop/
Yet you need to develop your logic around that library.
I have made example, you can see it on this link:
http://simplestudio.rs/yard/crop_img/
Basically you can get URL to your image via php and using my code or code similar to it crop your image into pieces and display them on canvas.
This way image is not accessible via browser or inspect element or what so ever. User can save the pieces individually but you can configure my code for piece to be 5px, I set it to 20x20px.
* test saving image piece by doing right click anywhere on image and do a "Save image as.." option.
Also you need to think of way how to hide src to image provided by php, if you need help on that I can help you.
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