I'm building a little site at the moment and users can upload their own profile picture but obviously some users pictures will be png and some jpeg, does anyone know anyway to be able to accept both when using the images as a background image in css. Here is my HTML:
<div class='avatar' style='background-image: url('users/avatars/$username.jpg')'></div>
Inside the users/avatars/ folder is every users profile picture named like so: "username.jpg" or "username.png".
Here is an example of my issue: http://cl.ly/image/3W311S2v0v0t
The first post loads the users profile image because it is a jpeg but the second post hasn't loaded the profile image as it is a png.
Thanks in advance.
You can do it in CSS like this:
background-image: url('users/avatars/$username.jpg'), url('users/avatars/$username.png');
If you absolutely must keep all the logic on the client side, in Javascript, you can catch the error if the image fails to load and attempt to load the other version.
For example:
<div class='avatar'>
<img src="users/avatars/$username.jpg" onerror='this.src="users/avatars/$username.png";' />
</div>
So if the JPG is not found and returns an error, the image will then load the PNG version.
If you are using PHP you can check the file extension and serve up different HTML. Here's how to read the file extension:
How to get the file extension in PHP?
Related
Is it possible to create a temp file server side for viewing an image?
I've some images & they're displayed from server but I want to have them watermarked... Found out about the Imagick Class, used composite... It can be viewed when sent as header but I need it somehow visible for the tag.
I don't want to uses 'write image' & create a new image from the composited image. I'm trying to use it as client Side thing (I'm not familiar with JS... Yes, I'll look into it but need an alternative till then).
Another alternative that I'm aware of is I should control that WHILE uploading the images but I've already uploaded quite a few so...
Any help appreciated!
Have you tried using the function that generates your image as a src attribute for the <img /> tag?
I don't know exactly how your code is, but I am thinking the end result could be something like:
<img src="data:image/jpeg;base64,<?php echo base64_encode($image_headers); ?>">
You basically output the headers inside the image src as a base64 encoded string.
What you should keep in mind is that you should adjust the image/jpeg type to the corresponding type of your image.
For example:
For JPG, JPEG files it would be image/jpeg
For PNG files it would be image/png
For WEBP files it would be image/webp
And of course the encoded string should be an image of the corresponding format.
I have been trying to change the images in the WampServer Index.php File... When I looked at the Index.php File I saw something Interesting. The File its self was containing the Image in the RAW format. Latter in the Code the PHP Script Calls the Image using the URL like http://localhost/index.php?img=pngFolder called a Image file stored RAW in the PHP file as a png.
Here is a link to a website that has the index.php code...
Link
I would Like to know how to replicate this same process to work for other images. Granted the File will be larger but its a Price to pay for what I am doing for a project. The Reason I want some help with this is so I can do it correctly. I have Tried 2 times already. I managed to get it to call one image correctly but not some of the others. I'm not sure if the image is just a different encoding or what..... Any Help would be Appreciated.
They are using BASE64 to encode the images into text. You can google for a base64 encoder that will convert your images to text. You can then put the text directly in an <img src="..base64 text.." />
Here's one..
https://www.base64-image.de/
As far as getting the image from the url index.php?img=pngfolder..
You could put this at the top of the file
if(isset($_GET['img'])){
echo "...base64 string.."; exit;
}
Then you can use the index url as the src for your image and it will simply retrieve the base64 image
I've been trying to display a gif image using PHP and have not found a solution to my problem with the research I've done. I know I can display image in HTML/CSS, but I need to use php in this case.
<html>
<?php
$img = imagecreatefromgif("http://www.mysite.com/images/timer.gif");
?>
<img src="<?= $img ?>" alt="timer" />
</html>
That code resides in a php doc on my server. I can tell the code is working because an icon of a torn image displays on my site, and when I attempt to save the torn icon image to desktop, the automatic file name appears as "Resource id.html"?
I read somewhere that creating gifs with Photoshop CS5 (as I did) uses a different frame separator sequence, \x00\x21, instead of the official standard \x00\x2C. The guy then said he uses pattern "#\x00\x21\xF9\x04.{4}\x00(\x2C|\x21)#s" to bypass that issue but I have no idea how/where to implement that or if that is even my issue (tried a different gif from internet and had same display problem). Thoughts? Thank you.
Imagecreatefromgif() returns an image resource, which you can't use in this way.
Have your PHP script output the image data, with the correct headers (see example here http://php.net/manual/en/function.imagecreatefromgif.php).
Then you can call your script just like you would any other image:
<img src="http://www.mysite.com/images/generate_image.php" alt="timer" />
i am displaying an image usign readfile() function of php
HMTL:
<img src='image.php?id=232'/>
PHP: image.php
<?php
$id=$_GET["id"];
if(image_view_allow($id)){
$path=get_image_path($id);
readfile($path);
}else{
readfile("images/not_allow.png");
}
image_view_allow and get_image_path is two that i have defined to check validation and get path
I am doing this because i want show image only to the allow person.
Does this affect speed of downloading an image ?
what is normal(means direct path in src attribute of img tag) or trick that is shown above?
Just loading an image probably same,but it is always better if you handle images with php, because when you resize image with php you load the needed size. But with html you load the bigger size than you need and resize.
first -> Does this affect speed of downloading an image ?
answer: no, because when the page is loaded, the php code is already translated to html before page is loaded in the borwser.
second -> what is normal(means direct path in src attribute of img tag) or trick that is shown above?
answer: both are same as both involve php code. When code executes in either way it will enter the source of the image in the image tag.
I have the following script
<div class="left">
<img src="image1.jpg" height="186" width="160" />
</div>
<div class="center">
<img src="image2.jpg" height="186" width="160" />
</div>
<div class="right">
<img src="image3.jpg" height="186" width="160" />
</div>
which generates the following :
I have this simple form to upload an image:
<form action="upload/image" method="post">
<input type="file" name="upload_image" />
<input type="submit" />
</form>
The reason to upload an image is to see how the mug(above) would look like with the image.
Now after uploading the image the mugs would look like following
Figure-2
Now if you kindly take a closer look at the above image you will see the uploaded image is sticked with the mug in such a way that as if it was designed with Photoshop but actually it was not .
Now my question is would you please kindly tell me how to paste the uploaded image on to all the three images of the coffee mug and make them look like the figure-2.
Thanks in Advance :)
P.S
I got the idea from this site-> http://www.zazzle.com/cr/design/pt-mug
I am trying to achieve the same thing the website has(I have been trying for so long but yet no result... failing to put the the uploaded image on the images of the mug ).
Here's the download link for the image I used here http://i43.tinypic.com/d66h4.png
Yes, you can do this.
If you examine the given url from Zazzle.com, after uploading the image, it is calling a program on their server - "designall.dll". It is doing all the magic.
As our other friends mentioned, it is not possible to achieve that effect simply with HTML, CSS and JavaScript (without using Canvas).
But using some server side program you can achieve this without any issues.
As I program on LAMP, I am giving a solution to implement the same with PHP and ImageMagick.
User uploads an image.
Image will be sent to a back-end PHP file.
PHP will distort the image as per our requirements.
Creates three copies and store in a temp folder with some unique ID.
As a response to that we will get some success code.
Once we get a success code, we will load the images from temp folder.
As the user clicks on any type of image, we will update the image as required.
And regarding the actual distortion code, you can use ImageMagick plugin.
More information about ImageMagick plugin can be found at :
ImageMagick Website
More information about the ways to distort (actually wrapping) an image using ImageMagick can be found at : Wrapping and Distrotion. These links contain good number of examples with preview too.
For our example, we need to create some static code which will distort an image every time in same shape.
Please let me know if I am missing something.
Friends, please help "black_belt" with better solutions if any.
Thanks.