How to crop an image using canvas and Kinetic.js

my function draws an image and another image at a different level with Kinetic.js, but I want to crop a second image called smsTopBg_image

window.onload = function() { //INITIALISATION var stage = new Kinetic.Stage({ container: "iPhone", width: 480, height: 720 }); //LAYERS var background_layer = new Kinetic.Layer(); var sms_layer = new Kinetic.Layer(); var text_layer = new Kinetic.Layer(); //ELEMENTS var iPhoneBg = new Image(); iPhoneBg.onload = function() { var iPhoneBg_image = new Kinetic.Image({ image: iPhoneBg }); background_layer.add(iPhoneBg_image); stage.add(background_layer); } iPhoneBg.src = "iPhoneBg.jpg"; //-------------------------------------------------- var smsTopBg = new Image(); smsTopBg.onload = function() { var smsTopBg_image = new Kinetic.Image({ image: smsTopBg, x: 10, y: 10, }); sms_layer.add(smsTopBg_image); stage.add(sms_layer); } smsTopBg.src = "iPhoneBg.jpg"; }; 

Thanks!

+4
source share
3 answers

You can add an optional crop object to the main attribute object in your image designer. It has properties x, y, width and height .

 var smsTopBg_image = new Kinetic.Image({ image: smsTopBg, x: 10, y: 10, // random values, choose your own : crop: { x: 20, y: 3, width: 100, height: 42 } }); 
+11
source

Well, if you need a complete solution, you need to add height and with the image before cropping:

 var smsTopBg = new Image(); smsTopBg.onload = function() { var smsTopBg_image = new Kinetic.Image({ image: smsTopBg, x: 200, y: 20, width: 50, height: 20, crop: { x: 20, y: 10, width: 50, height: 50 } }); sms_layer.add(smsTopBg_image); stage.add(sms_layer); } 

Thanks!

+2
source

Refer to this URL for Image Crop in Kinetic.js: http://jsfiddle.net/umhm7/

+1
source

All Articles