Skip to content

Instantly share code, notes, and snippets.

@DanielChalk

DanielChalk/canvas-resize.html

Last active December 21, 2015 20:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DanielChalk/6360555 to your computer and use it in GitHub Desktop.
Save DanielChalk/6360555 to your computer and use it in GitHub Desktop.
Download ZIP
Resizing an image using Canvas with jQuery and Kinetic.
Raw
canvas-resize.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js" type="text/javascript"></script>
<script src="canvas-resize.js" type="text/javascript"></script>
</head>
<body>
<div id="header"></div>
</body>
</html>
Raw
canvas-resize.js
jQuery(function($){
var stage;
var layer;
var image;
var stageWidth = 1000;
var stageHeight = 500;
var zoomFactor = 0.001;
stage = new Kinetic.Stage({
container: 'header',
width: stageWidth,
height: stageHeight
});
layer = new Kinetic.Layer({draggable: true});
drag = new Kinetic.Layer();
source = new Image();
source.onload = function() {
image = new Kinetic.Image({
x: (stageWidth / 2) - (source.width / 2),
y: (stageHeight / 2) - (source.height / 2),
image: source
});
layer.add(image);
stage.add(layer);
$(stage.content).on('mousewheel', function(event) {
var delta = (event.originalEvent.wheelDelta / 4)*zoomFactor;
console.log(delta);
layer.setScale(layer.getScale().x+delta);
layer.draw();
});
};
source.src = "http://ff/img/galleries/521ce45abb976/orig.jpg";
});
@DanielChalk
Copy link
Author

Updated indentation, for some reason gist didn't like the indentation I was using .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment