Kineticjs: How To Import Iphone Retina Images Taken By Camera?

I tried to import camera images from iPhone5 retinal iOs7. The following image shows the problem. The stage is the yellow filled rectangle and the image at the top is the image whi

Solution 1:

I want to repost my comment from github: https://github.com/ericdrowell/KineticJS/pull/654#issuecomment-40284966

Use fixed canvas instead of image.

// detect scale ratio
function detectVerticalSquash(img) {
  variw= img.width, ih = img.height;
  varcanvas= document.createElement('canvas');
  canvas.width = 1;
  canvas.height = ih;
  varctx= canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  vardata= ctx.getImageData(0, 0, 1, ih).data;
  // search image edge pixel position in case it is squashed vertically.varsy=0;
  varey= ih;
  varpy= ih;
  while (py > sy) {
      varalpha= data[(py - 1) * 4 + 3];
      if (alpha === 0) {
          ey = py;
      } else {
          sy = py;
      }
      py = (ey + sy) >> 1;
  }
  varratio= (py / ih);
  return (ratio===0)?1:ratio;
}

// create canvas to replace with image
function generateCanvas(image){
    varcanvas= document.createElement('canvas');
    varcontext= canvas.getContext('2d');
    canvas.width = image.width;
    canvas.height = image.height;
    varvertSquashRatio= detectVerticalSquash(image);
    context.drawImage(image, 0, 0, 
                       image.width, image.height / vertSquashRatio);
    return(canvas);
}

varimg=newImage();
img.onload = function() {
  varstage=newKinetic.Stage({
      container: 'con',
      width: 1000,
      height: 1000
  });
  varlayer=newKinetic.Layer();
  stage.add(layer);
  varimage=newKinetic.Image({
    image : generateCanvas(img),
    width : 200,
    height : 200,
    draggable : true
  });
  layer.add(image);
  layer.draw();
}
img.src = 'diana2.jpg';