CODEWITHSUNDEEP
kineticjs
jagku
jagku

Reputation: 309

Issue with replacing image

I have amended your fiddle a little link. What I am trying to do is NOT to load both images in at the start - just the first one.

Then when the user clicks on the house loaded in - I want to, at this point, load in the second house.

I am trying to mimick this behaviour using the fiddle: 1) User clicks on the image 2) Server generates and chucks across the name of the generated jpg.

To avoid doing this in the fiddle, I have just added this line:

var newHouse = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg";

3) This jpg then replaces the existing one when the original image is clicked.

For some reason, this code isn't doing it:

var newImage = new Image();
newImage.onload = function () {
    var image = new Kinetic.Image({
        id: i,
        image: newImage,
        x: 0,
        y: 0,
        width: 205,
        height: 205,
        name: 'image',
        stroke: 'red',
        strokeWidth: 2,
        strokeEnabled: false
    });
};
newImage.src = newHouse;
// keep the Kinetic.Image object
// but replace its image
ImageObject.setImage(newImage);

Many Thanks for any help!

Upvotes: 0

Views: 116

Answers (2)

projeqht
projeqht

Reputation: 3160

You just had to rearrange your newImage.onload function:

var newImage = new Image();
newImage.onload = function() {
    // keep the Kinetic.Image object
// but replace its image
ImageObject.setImage(newImage); 
    layer.draw();
};
newImage.src = newHouse;

JSFiddle

Upvotes: 1

markE
markE

Reputation: 105015

Loading a new image from your server & using it to replace an existing image object's image

The key is to wait until the new image (house3) has been fully loaded before trying to do the swap.

    function swap(){

        // get the image object from the selected group
        var ImageObjects = group.get("Image");
        var ImageObject=ImageObjects.toArray()[0];

        // load a second image 
        var house3=new Image();
        house3.onload=function(){

            // now we know the second image has been downloaded

            // keep the Kinetic.Image object
            // but replace its image
            ImageObject.setImage(house3);

            layer.draw();
        }
        house3.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg";
    }

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/wsCfv/2/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var group=new Kinetic.Group({width:205,height:205});
    layer.add(group);

    var house1=new Image();
    house1.onload=function(){
        start();
    }
    house1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg";


    var image;
    var rect;
    var currentImageIndex;

    function start(){

        image=new Kinetic.Image({
            image:house1,
            x:0,
            y:0,
            width:204,
            height:204,
        });
        group.add(image);
        currentImageIndex=0;

        rect = new Kinetic.Rect({
          x: 0,
          y: 0,
          width: 205,
          height: 205,
          stroke: "blue",
          strokeWidth: 4
        });    
        group.add(rect);

        layer.draw();
        console.log("started");
    }

    function swap(){

        currentImageIndex = (currentImageIndex==0 ? 1 : 0);

        // get the image object from the selected group
        var ImageObjects = group.get("Image");
        var ImageObject=ImageObjects.toArray()[0];

        // load a second image 
        var house3=new Image();
        house3.onload=function(){

            // now we know the second image has been downloaded

            // keep the Kinetic.Image object
            // but replace its image
            ImageObject.setImage(house3);

            layer.draw();
        }
        house3.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg";
    }


    $("#swap").click(function(){ $("#swap").hide();  swap(); });



}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
    <button id="swap">Swap Images</button>
</body>
</html>

Upvotes: 2

Related Questions