根据原始旋转旋转照片

时间:2016-04-17 18:56:52

标签: javascript html5 rotation html5-canvas exif

我正在尝试根据原始旋转来旋转照片,这是由相机在EXIF图像数据中设置的。诀窍是所有这一切都应该在浏览器中进行,使用JavaScript和HTML5“画布”。

目前,我可以获得图像的旋转效果,但如果图像被反转或翻转,则无法旋转图像。

JS代码 ..

   function getOrientation(file, callback) {
   var reader = new FileReader();
   reader.onload = function(e) {

var view = new DataView(e.target.result);
if (view.getUint16(0, false) != 0xFFD8) return callback(-2);
var length = view.byteLength, offset = 2;
while (offset < length) {
  var marker = view.getUint16(offset, false);
  offset += 2;
  if (marker == 0xFFE1) {
    if (view.getUint32(offset += 2, false) != 0x45786966) return callback(-1);
    var little = view.getUint16(offset += 6, false) == 0x4949;
    offset += view.getUint32(offset + 4, little);
    var tags = view.getUint16(offset, little);
    offset += 2;
    for (var i = 0; i < tags; i++)
      if (view.getUint16(offset + (i * 12), little) == 0x0112)
        return callback(view.getUint16(offset + (i * 12) + 8, little));
  }
  else if ((marker & 0xFF00) != 0xFF00) break;
  else offset += view.getUint16(offset, false);
}
return callback(-1);
 };
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
}


    canvasCtx = document.getElementById("panel").getContext("2d");

        document.getElementById("ifile").onchange = function(event) {

            getOrientation(document.getElementById("ifile").files[0], function(orientation) {
            alert('orientation: ' + orientation);
            });

            this.imageFile = event.target.files[0];

            var reader = new FileReader();
            reader.onload =  function(event) {
                var img = new Image();
                //img.style.width = "300px";
                //img.style.height = "300px";

                img.onload = function() {
                    drawImage(img);
                }
                img.src = event.target.result;

            }
            reader.readAsDataURL(this.imageFile);
        }

        drawImage = function(img) {
            this.canvasCtx.canvas.width = 300;//img.width;
            this.canvasCtx.canvas.height = 300;//img.height;

            if(img.width>img.height){                                               //Landscape Image 
                canvasCtx.width = 300;
                canvasCtx.height = 300 / img.width * img.height;
            } else {                                                                  //Portrait Image
                canvasCtx.width = 300 / img.height * img.width;
                canvasCtx.height = 300;
            } 

            canvasCtx.translate(img.width * 0.5, img.height * 0.5);
            /// rotate canvas context
            canvasCtx.rotate(0.5 * Math.PI); /// 90deg clock-wise

            /// translate back so next draw op happens in upper left corner
            canvasCtx.translate(-img.width * 0.5, -img.height * 0.5);

            this.canvasCtx.drawImage(img,0,0,canvasCtx.width, canvasCtx.height);
            url = canvasCtx.canvas.toDataURL();
        }

我有两张ios拍摄的照片,android分别为3和6。我想将他们的方向改为1.无法想象如何做到这一点。请帮助..

0 个答案:

没有答案