KineticJs：如何导入相机拍摄的 iPhone Retina 图像？

Question

我尝试从 iPhone5 视网膜 iOs7 导入相机图像。下图显示了问题。舞台是黄色填充的矩形，顶部的图像是导入到舞台的图像。

我在这里创建了一个 Jsfiddle 来演示这个问题：http://jsfiddle.net/confile/45zdm/

我认为有两个问题，第一个是 2 的像素比例可能是个问题。当我设置

image.height(stage.height())

图像只占舞台高度的一半。这只是用相机拍摄的图像的罐子。当您从屏幕截图导入图像时，它可以正常工作，如下图所示：

第二个问题是来自相机的图像角度错误，因此您必须考虑 exif 方向属性。

如何将 iPhone 摄像头中的视网膜图像导入 KineticJs 以正确显示？

Answer 1

我想从 github 转发我的评论：https://github.com/ericdrowell/KineticJS/pull/654#issuecomment-40284966

使用固定画布而不是图像。

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

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

var img = new Image();
img.onload = function() {
  var stage = new Kinetic.Stage({
      container: 'con',
      width: 1000,
      height: 1000
  });
  var layer = new Kinetic.Layer();
  stage.add(layer);
  var image = new Kinetic.Image({
    image : generateCanvas(img),
    width : 200,
    height : 200,
    draggable : true
  });
  layer.add(image);
  layer.draw();
}
img.src = 'diana2.jpg';