crop image by other layer

Question

i have two layers in kineticjs stage one of them is a border to the other image i want to crop the image by the border and not have the border on the end image a jsfiddle example is attached i want to keep only the the inner image(the backpack)

var scale = 1;
var origwidth = 280;
var origheight = 302;
var ratio = origwidth/origheight;
var newwidth = 300;
var newheight = newwidth/ratio;
var stage = new Kinetic.Stage({
    container: 'photouploaded',
    width: newwidth,
    height: newheight
  });
  var uploaded;
  var mask;
  var layer = new Kinetic.Layer();
  var mlayer = new Kinetic.Layer();
  var imageObj = new Image();
  var maskObj = new Image();
  mask = new Kinetic.Image({
      x: 0,
      y: 0,
      image: maskObj,
      width: newwidth,
      height: newheight,
      listening: false
    });
   uploaded = new Kinetic.Image({
      x: (mask.attrs.width / 2) + 15,
      y: (mask.attrs.height / 2) + 15,
      image: imageObj,
      width: 270,
      height: 270,
      offset: [135,135],
      draggable: true
    });
  imageObj.onload = function() {
    layer.add(uploaded);
    mlayer.add(mask);
    stage.add(layer);
    stage.add(mlayer);  
  };
  imageObj.src = 'base64 of photo';
  maskObj.src = 'base64 of photo';

jsfiddle

score 1 · Accepted Answer · answered Nov 10 '13 at 22:31

Then don't draw the border at all and just set a clip on the stage.

Any draws (like your backpack image) will only appear inside the clipping region of the stage.

// set variables to create a clipping region on the stage
// in this example, the clipping area will be a rectangle
// at x=75, y=50 with width=100 and height=200

var clipLeft=75;
var clipTop=50;
var clipWidth=100;
var clipHeight=200;

var stage = new Kinetic.Stage({
    container: 'photouploaded',
    width: newwidth,
    height: newheight,
    clip:[clipLeft,clipTop,clipWidth,clipHeight]
  });

// Now any drawings/images will only be visible inside the clipping region

crop image by other layer

1 Answers1