Question

我有一个页面，允许您浏览图像，然后在其上绘制并保存原始版本和注释版本。我正在利用megapix-image.js和exif.js来帮助正确渲染来自多个移动设备的图像。除了某些方向外，它的效果很好。例如，在iPhone4s上拍摄的垂直照片被exif视为方向6，并通过megapix图像相应地翻转，因此它在画布上很好地呈现。出于某种原因，当我在之后绘制它时，看起来绘图是相反的。鼠标和触摸两者的行为方式相同。坐标看起来对我来说（意味着它们匹配工作水平pic和非工作垂直pic），当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
                    });



                });

            }

        }

但完整的jsfiddle就在这里：

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

有没有人对我有任何线索？

Answer 1

如果你看一下你正在使用的lib，有一个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();

              //...

        }

Answer 2

我最后通过在我的html中添加另一个画布来修复此问题（名为＆＃34; annoCanvas2＆＃34;）。然后，我更新了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);
 }
}

然后，在第一个旋转并翻转和渲染之后，我将生成的画布渲染到我的＆＃34; twin＆＃34;。然后我有一个漂亮的画布，我的更新图像，然后我可以绘制，并保存！

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);

}

我很高兴能解决它，所以我遇到了我的截止日期，但我仍然不确定为什么我必须这样做。如果有人可以解释它，我很想知道为什么。

在megapix渲染之后绘制在画布上是相反的

2 个答案: