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.
Related
I have started learning html and php. I know very little coding of it. I am confused for using png icons in my action buttons. I have currently text button with css. I want use png icons instead that text buttons. I have used it like below
<td>
Edit
Activate
Delete
</td>
Now I want use png icons there instead of text. What should I do for it ?
I have icons located in directory called icons.
Sorry for my little knowledge.
Thanks
You can add icon as image in your code, check below snippet
<td><img src="https://dummyimage.com/20x20/000/fff.png&text=E" alt="Edit"/>
<img src="https://dummyimage.com/20x20/000/fff.png&text=A" alt="Activate"/>
<img src="https://dummyimage.com/20x20/000/fff.png&text=D" alt="Delete"/></td>
It depends on the structure of your web folder, where icons directory is in your web folder.
If you have icon directory in your root folder and php file is also in root then you can simply use below syntax :
<img src="icon/image_name.jpg" alt="" />
Or you can use complete path for icon folder relative to your website url as shown below :
<img src="http://localhost:8080/websitename/icon/image_name.jpg" alt="" />
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?
On site: http://viladivanomoveis.com.br/?page=produtos&prod=Poltronas Images are not displayed when accessing from iphones or ipads, suspect it is because of this php code which resizes the original picture:
<a href="?page=item&prod=<?php echo remover($exeprod['produto']);?>">
<img src="thumb.php?img=admin/<?php echo $spr[0];?>&x=300&y=300&q=80" alt="" title=""/>
</a>
Anyone knows how to to make the images appear?
Looking # http://viladivanomoveis.com.br/?page=produtos&prod=Poltronas and your code this won't be affecting your images.
The PHP code is done on the server regardless of the device used and doesn't resize it.
I would assume this is to do with your style sheet(CSS).
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 new to Symfony.
I created a layout page in which I have this :
<img src="images/header.jpg" width="790" height="228" alt="" />
but the image isn't displayed in the page when accessed from the browser.
I put the file header.jpg in the web/images/ folder.
I thought I could learn Symfony in a week while working on a small project. is it possible ?
Use slash at the beginning like
<img src="/images/header.jpg" width="790" height="228" alt="" />
You can also use image_tag (which is better for routing)
image_tag('/images/header.jpg', array('alt' => __("My image")))
In the array with parameters you can add all HTML attributes like width, height, alt etc.
P.S. IT's not easy to learn Symfony. You need much more time
If you don't want a fully PHP generated image tag but just want the correct path to your image, you can do :
<img src="<?php echo image_path('header.jpg'); ?>"> width="700" height="228" alt="" />
Notice that the path passed to image_path excludes the /images part as this is automatically determined and created for you by Symfony, all you need to supply is the path to the file relative to the image directory.
You can also get to your image directory a little more crudely using
sfConfig::get('sf_web_dir')."/images/path/to/your/image.jpg"
It should be noted that using image_tag has a much larger performance cost attached to it than using image_path as noted on thirtyseven's blog
Hope that helps :)