cgallagher/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/2.4.0/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva Image Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
</head>
<body>


  <div id="image-json">

  </div>
  <button onClick="switchRemoteImage()">Show Remote image!</button>
  <div id="container"></div>
  <script>
    var width = 1200;
    var height = 1200;

    stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });

    var layer = new Konva.Layer({id: 'image-layer'});
    let imageURL = 'https://ichef.bbci.co.uk/onesport/cps/480/cpsprodpb/1859A/production/_101883799_gettyimages-844211624.jpg'
    let newImage = 'https://s.hs-data.com/bilder/spieler/gross/208995.jpg'

    Konva.Image.fromURL(imageURL,function(image){
     image.setAttr('src', imageURL);
     image.setAttr('width', 1200);
     image.setAttr('height', 1200);
     image.setAttr('id', 'background-image');

  layer.add(image);
     layer.draw();
     stage.add(layer);
    });


    function switchRemoteImage(){
      let imageLayer = stage.findOne('#image-layer')
      let card = imageLayer.findOne('Image')

      Konva.Image.fromURL(newImage,function(updatedImage){
        card.image(updatedImage.attrs.image);
        card.setAttr('src', newImage);
        imageLayer.draw();
      });
    }


  </script>

<script id="jsbin-source-html" type="text/html">
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/2.4.0/konva.min.js"><\/script>
  <meta charset="utf-8">
  <title>Konva Image Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
</head>
<body>


  <div id="image-json">

  </div>
  <button onClick="switchRemoteImage()">Show Remote image!</button>
  <div id="container"></div>
  <script>
    var width = 1200;
    var height = 1200;

    stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });

    var layer = new Konva.Layer({id: 'image-layer'});
    let imageURL = 'https://ichef.bbci.co.uk/onesport/cps/480/cpsprodpb/1859A/production/_101883799_gettyimages-844211624.jpg'
    let newImage = 'https://s.hs-data.com/bilder/spieler/gross/208995.jpg'

    Konva.Image.fromURL(imageURL,function(image){
     image.setAttr('src', imageURL);
     image.setAttr('width', 1200);
     image.setAttr('height', 1200);
     image.setAttr('id', 'background-image');

  layer.add(image);
     layer.draw();
     stage.add(layer);
    });


    function switchRemoteImage(){
      let imageLayer = stage.findOne('#image-layer')
      let card = imageLayer.findOne('Image')

      Konva.Image.fromURL(newImage,function(updatedImage){
        card.image(updatedImage.attrs.image);
        card.setAttr('src', newImage);
        imageLayer.draw();
      });
    }


  <\/script>
</body>
</html></script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdn.rawgit.com/konvajs/konva/2.4.0/konva.min.js"></script>
	<meta charset="utf-8">
	<title>Konva Image Demo</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #F0F0F0;
	}
	</style>
	</head>
	<body>



	<div id="image-json">

	</div>
	<button onClick="switchRemoteImage()">Show Remote image!</button>
	<div id="container"></div>
	<script>
	var width = 1200;
	var height = 1200;

	stage = new Konva.Stage({
	container: 'container',
	width: width,
	height: height
	});

	var layer = new Konva.Layer({id: 'image-layer'});
	let imageURL = 'https://ichef.bbci.co.uk/onesport/cps/480/cpsprodpb/1859A/production/_101883799_gettyimages-844211624.jpg'
	let newImage = 'https://s.hs-data.com/bilder/spieler/gross/208995.jpg'

	Konva.Image.fromURL(imageURL,function(image){
	image.setAttr('src', imageURL);
	image.setAttr('width', 1200);
	image.setAttr('height', 1200);
	image.setAttr('id', 'background-image');

	layer.add(image);
	layer.draw();
	stage.add(layer);
	});



	function switchRemoteImage(){
	let imageLayer = stage.findOne('#image-layer')
	let card = imageLayer.findOne('Image')

	Konva.Image.fromURL(newImage,function(updatedImage){
	card.image(updatedImage.attrs.image);
	card.setAttr('src', newImage);
	imageLayer.draw();
	});
	}


	</script>

	<script id="jsbin-source-html" type="text/html">
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdn.rawgit.com/konvajs/konva/2.4.0/konva.min.js"><\/script>
	<meta charset="utf-8">
	<title>Konva Image Demo</title>
	<style>
	body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #F0F0F0;
	}
	</style>
	</head>
	<body>



	<div id="image-json">

	</div>
	<button onClick="switchRemoteImage()">Show Remote image!</button>
	<div id="container"></div>
	<script>
	var width = 1200;
	var height = 1200;

	stage = new Konva.Stage({
	container: 'container',
	width: width,
	height: height
	});

	var layer = new Konva.Layer({id: 'image-layer'});
	let imageURL = 'https://ichef.bbci.co.uk/onesport/cps/480/cpsprodpb/1859A/production/_101883799_gettyimages-844211624.jpg'
	let newImage = 'https://s.hs-data.com/bilder/spieler/gross/208995.jpg'

	Konva.Image.fromURL(imageURL,function(image){
	image.setAttr('src', imageURL);
	image.setAttr('width', 1200);
	image.setAttr('height', 1200);
	image.setAttr('id', 'background-image');

	layer.add(image);
	layer.draw();
	stage.add(layer);
	});



	function switchRemoteImage(){
	let imageLayer = stage.findOne('#image-layer')
	let card = imageLayer.findOne('Image')

	Konva.Image.fromURL(newImage,function(updatedImage){
	card.image(updatedImage.attrs.image);
	card.setAttr('src', newImage);
	imageLayer.draw();
	});
	}


	<\/script>
	</body>
	</html></script>

	</body>
	</html>