If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

🔴► JS Image Drag, Resize, Upload with animated gif?

Can anyone tell me if this code can work with animated gif images? I tried using one but they stay still. And only other thing I wish I could do with it is have an upload window so people can upload their own image to replace one of the 2 images, is that possible guys?

PS I don't know if there is an easier way to do this but basically my end goal is to have 2 images, top image is my animated gif (product i sell) and the bottom image is a picture a customer uploads of their car. Both images should be resizable, and my gif image should alway be on top.

So essentially I see 2 questions to answer, each with different answers.

"JS Image Drag, Resize, Upload with animated gif?"
The answer to this is yes. However, this leads into the second question:

"Can anyone tell me if this code can work with animated gif images?"
The answer to this is no. After looking through the script, I found it was using KineticJS, which is an HTML5 canvas framework. The <canvas> tag does not display animated .gif images as animations. So when using this particular script, adding an animated .gif will result in a single frame .gif being added to the <canvas> tag for the script to then utilize further functionality. There isn't a way around it when it comes to the <canvas> tag.

But going back to the first question, it is possible to have animated .gif images on a page that can be moved, resized and uploaded. However you would need a different script that doesn't use the <canvas> tag to work with the images. And in terms of resizing an image, you'd likely need PHP's GD Image Library to handle that as JS alone cannot resize an image (only give the visual appearance of resizing, but PHP would have to create the actual file with new dimensions).

I don't care if JS only gives a visual appearance of resizing. I don't need to actually save new resized image with new dimensions saved I guess. I just want to make this work with whatever can do it easiest. I'm a newb so I need it to be simple where I can understand what I'm doing to make this work. Anyway you can point me in the right direction as far as what the script that would work would contain? Or if it has a name? IDK what to search google for. Thanks again

I think that I should ask you: what exactly do you want this script to do?

I only ask because if you don't need it to actually save a resized image then I can't see why it would need to resize at all. And the same goes for the drag functionality as well. I just want to get an idea of what you're trying to do, or rather what you want your page to do. Once I understand that I can give you links, suggestions and maybe even code snippets.

I have an automotive product that I would like to sell, its a license plate bracket. I want my customers to be able to see how the product would look on their own car before they buy it. I though it would be cool if a customer can interact with my product and see it on their car before they buy.

So I was thinking make a 600x400px window on my website where a customer can upload a picture of their own car to the background (bottom layer), and my product would be a picture on top (top layer). My product image needs to be a GIF file too, and customer needs to be able to move the GIF (top layer) around and resize it so that the license plate bracket looks the right size and is positioned correctly over the bottom layer which would be a pic of their car. Everyone car pic a customer uploads will be different dimension so its very important to be able to move around the GIF (top layer) and resize it so that it fits better and looks more real you know.