Skip to content

Instantly share code, notes, and snippets.

@cgallagher
Created October 2, 2018 14:48
Show Gist options
  • Save cgallagher/ecf89b93e96bb24ba500b04d0d644a8b to your computer and use it in GitHub Desktop.
Save cgallagher/ecf89b93e96bb24ba500b04d0d644a8b to your computer and use it in GitHub Desktop.
Konva Image Demo // source https://jsbin.com/gatibubelo
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment