反转 megapix 渲染后在画布上绘图答案

【问题标题】：Drawing on canvas after megapix rendering is reversed反转 megapix 渲染后在画布上绘图
【发布时间】：2014-07-28 15:09:51
【问题描述】：

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

有人知道我的线索吗？

【问题讨论】：

标签： javascript iphone canvas html5-canvas

【解决方案1】：

如果您查看您正在使用的库，则有一个 transformCoordinate 函数，用于在绘图之前设置正确的变换。
而且他们不会保存/恢复画布（嘘！！！），所以它在之后的变换中仍然存在。

你的解决方案是做 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();

              //...

        }

【讨论】：

我认为他们确实做到了...看看 megapix-image.js 中的 renderImageToCanvas。他们进行保存，然后在转换后恢复。你是说我需要再做一次吗

【解决方案2】：

我最终通过在我的 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);

}

我很高兴能把它修好，所以我赶上了最后期限，但我仍然不确定我为什么必须这样做。如果有人可以解释它，我很想知道为什么。

【讨论】：