dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

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

Hybrid View

  1. #1
    Join Date
    Feb 2012
    Posts
    23

    🔴► 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.

    I found the code at http://html5canvastutorials.com/labs...invert-images/

    HTML Code:
    <body onmousedown="return false;">
        <div id="container"></div>
        <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
        <script>
          function update(activeAnchor) {
            var group = activeAnchor.getParent();
    
            var topLeft = group.find('.topLeft')[0];
            var topRight = group.find('.topRight')[0];
            var bottomRight = group.find('.bottomRight')[0];
            var bottomLeft = group.find('.bottomLeft')[0];
            var image = group.find('.image')[0];
    
            var anchorX = activeAnchor.x();
            var anchorY = activeAnchor.y();
    
            // update anchor positions
            switch (activeAnchor.name()) {
              case 'topLeft':
                topRight.y(anchorY);
                bottomLeft.x(anchorX);
                break;
              case 'topRight':
                topLeft.y(anchorY);
                bottomRight.x(anchorX);
                break;
              case 'bottomRight':
                bottomLeft.y(anchorY);
                topRight.x(anchorX); 
                break;
              case 'bottomLeft':
                bottomRight.y(anchorY);
                topLeft.x(anchorX); 
                break;
            }
    
            image.setPosition(topLeft.getPosition());
    
            var width = topRight.x() - topLeft.x();
            var height = bottomLeft.y() - topLeft.y();
            if(width && height) {
              image.setSize({width:width, height: height});
            }
          }
          function addAnchor(group, x, y, name) {
            var stage = group.getStage();
            var layer = group.getLayer();
    
            var anchor = new Kinetic.Circle({
              x: x,
              y: y,
              stroke: '#666',
              fill: '#ddd',
              strokeWidth: 2,
              radius: 8,
              name: name,
              draggable: true,
              dragOnTop: false
            });
    
            anchor.on('dragmove', function() {
              update(this);
              layer.draw();
            });
            anchor.on('mousedown touchstart', function() {
              group.setDraggable(false);
              this.moveToTop();
            });
            anchor.on('dragend', function() {
              group.setDraggable(true);
              layer.draw();
            });
            // add hover styling
            anchor.on('mouseover', function() {
              var layer = this.getLayer();
              document.body.style.cursor = 'pointer';
              this.setStrokeWidth(4);
              layer.draw();
            });
            anchor.on('mouseout', function() {
              var layer = this.getLayer();
              document.body.style.cursor = 'default';
              this.strokeWidth(2);
              layer.draw();
            });
    
            group.add(anchor);
          }
          function loadImages(sources, callback) {
            var images = {};
            var loadedImages = 0;
            var numImages = 0;
            for(var src in sources) {
              numImages++;
            }
            for(var src in sources) {
              images[src] = new Image();
              images[src].onload = function() {
                if(++loadedImages >= numImages) {
                  callback(images);
                }
              };
              images[src].src = sources[src];
            }
          }
          function initStage(images) {
            var stage = new Kinetic.Stage({
              container: 'container',
              width: 578,
              height: 400
            });
            var darthVaderGroup = new Kinetic.Group({
              x: 270,
              y: 100,
              draggable: true
            });
            var yodaGroup = new Kinetic.Group({
              x: 100,
              y: 110,
              draggable: true
            });
            var layer = new Kinetic.Layer();
    
            /*
             * go ahead and add the groups
             * to the layer and the layer to the
             * stage so that the groups have knowledge
             * of its layer and stage
             */
            layer.add(darthVaderGroup);
            layer.add(yodaGroup);
            stage.add(layer);
    
            // darth vader
            var darthVaderImg = new Kinetic.Image({
              x: 0,
              y: 0,
              image: images.darthVader,
              width: 200,
              height: 138,
              name: 'image'
            });
    
            darthVaderGroup.add(darthVaderImg);
            addAnchor(darthVaderGroup, 0, 0, 'topLeft');
            addAnchor(darthVaderGroup, 200, 0, 'topRight');
            addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
            addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
    
            darthVaderGroup.on('dragstart', function() {
              this.moveToTop();
            });
            // yoda
            var yodaImg = new Kinetic.Image({
              x: 0,
              y: 0,
              image: images.yoda,
              width: 93,
              height: 104,
              name: 'image'
            });
    
            yodaGroup.add(yodaImg);
            addAnchor(yodaGroup, 0, 0, 'topLeft');
            addAnchor(yodaGroup, 93, 0, 'topRight');
            addAnchor(yodaGroup, 93, 104, 'bottomRight');
            addAnchor(yodaGroup, 0, 104, 'bottomLeft');
    
            yodaGroup.on('dragstart', function() {
              this.moveToTop();
            });
    
            stage.draw();
          }
    
          var sources = {
            darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
            yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
          };
          loadImages(sources, initStage);
    
        </script>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    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).

  3. #3
    Join Date
    Feb 2012
    Posts
    23
    Thanks for your reply.

    So I need a script with no canvas tag

    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

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    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.

  5. #5
    Join Date
    Feb 2012
    Posts
    23
    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.

    Hope you can understand my explanation...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles