megapix绘制反转后在画布上的绘制

Question

我有一个页面，可以让你浏览一个图像，然后画它，并保存原始版本和注释版本。我正在利用megapix-image.js和exif.js来帮助正确呈现来自多个移动设备的图像。它的作用很大，除了在特定的方向。例如，在iPhone4s上拍摄的垂直照片被exif认为是方向6，并相应地被megapix图像翻转，因此它在画布上呈现得很好。出于某种原因，当我在之后画的时候，这幅画似乎被颠倒了。鼠标和触觉都是一样的。坐标在我看来是对的(这意味着它们匹配一个工作的水平图片和一个不工作的垂直图片)，当megapix-image.js翻转它时，画布的高度和宽度也是如此。这让我相信这与背景有关，但老实说，我不太确定。我有一个JS小提琴的一部分，我的工作，以显示行为。只需从移动设备中浏览垂直拍摄的图片，或在移动设备上以垂直格式拍摄图片并使用它。我想所有的人都会表现出同样的行为。

最后的呈现如下所示：

        function RenderImage(file2) {

            if (typeof file2[0].files[0] != 'undefined') {

                EXIF.getData(file2[0].files[0], function () {

                    orientation = EXIF.getTag(this, "Orientation");

                    var file = file2[0].files[0];

                    var mpImg = new MegaPixImage(file);



                    var resCanvas1 = document.getElementById('annoCanvas');


                    mpImg.render(resCanvas1, {
                        maxWidth: 700,
                        maxHeight: 700,
                        orientation: orientation
                    });



                });

            }

        }

但真正的麻烦事在这里：

http://jsfiddle.net/awebster28/Tq3qU/6/

有人有什么线索给我吗？

Answer 1

最后，我将另一个画布添加到我的html (名为"annoCanvas2")中，从而修复了这个问题。然后，我更新了megapix-image.js以包含这个函数，它将新画布的内容绘制成一个新的：

function drawTwin(sourceCanvas)
 {
  var id = sourceCanvas.id + "2";
  var destCanvas = document.getElementById(id);

  if (destCanvas !== null) {
    var twinCtx = destCanvas.getContext("2d");
     destCanvas.width = sourceCanvas.width;
    destCanvas.height = sourceCanvas.height;

    twinCtx.drawImage(sourceCanvas, 0, 0, sourceCanvas.width, sourceCanvas.height);
 }
}

然后，在第一个画布旋转、翻转和渲染之后，我将生成的画布呈现给我的“孪生画布”。然后我有了一个漂亮的画布，我的更新图像，然后我可以画和保存！

var tagName = target.tagName.toLowerCase();
 if (tagName === 'img') {
        target.src = renderImageToDataURL(this.srcImage, opt, doSquash);
 } else if (tagName === 'canvas') {
    renderImageToCanvas(this.srcImage, target, opt, doSquash);

   //------I added this-----------
   drawTwin(target);

}

我很高兴能把它修好，所以我在最后期限前完成了，但我仍然不知道我为什么要这么做。如果有谁能解释的话，我很想知道原因。

Answer 2

如果您查看正在使用的库，就会看到一个transformCoordinate函数，用于在绘图前设置正确的转换。

而且他们不保存/恢复画布(boooo！)因此，这一转变仍将是明智的。

您的解决方案是执行lib应该做的事情:在呈现之前保存上下文，然后恢复它：

  function RenderImage(file2) {

              // ... same code ...

              var mpImg = new MegaPixImage(file);

               var eData = EXIF.pretty(this);

               // Render resized image into canvas element.
               var resCanvas1 = document.getElementById('annoCanvas');

               var ctx = resCanvas1.getContext('2d');
               ctx.save(); 
               //setting the orientation flips it
               mpImg.render(resCanvas1, {
                        maxWidth: 700,
                        maxHeight: 700,
                        orientation: orientation
                    });
               ctx.restore();

              //...

        }