Question

我正在尝试旋转大图像并将其另存为文件。我尝试了几种因图像尺寸较大而失败的方法。（OpenCV，Paint Shop Pro等）。

所以，我试图用javascript做到这一点。我可以将图像绘制到旋转的画布上（这可以），但是当我尝试将画布保存到文件时，旋转会丢失。这有意义，但是想了解如何在保存之前捕获/提取画布的旋转状态？

客户端代码：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            function initPage() {
                var imageObj = new Image();
                imageObj.onload = function() {
                    // Draw onto rotated canvas
                    var canvas = document.getElementById('mapCanvas');
                    context = canvas.getContext('2d');
                    context.drawImage(imageObj, 0, 0);

                    // Save image as png
                    var dt = canvas.toDataURL('image/png');
                    $.ajax({
                      type: "POST",
                      url: "savePNG.php?file=FN617_ROT",
                      data: { 
                         imgBase64: dt
                      }
                    }).done(function(o) {
                      console.log('saved'); 
                    });

                };  
                imageObj.src = 'FN617.png';
            }
        </script>

        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #mapCanvas {
                transform-origin:center center;
                transform: rotate(-32.5deg);
            }
        </style>       
    </head>

    <body onload="initPage();">
        <canvas id="mapCanvas" width="9600" height="7200"></canvas>
    </body> 
</html>

服务器代码：

<?php
    $base64 = str_replace('data:image/png;base64,', '', $_REQUEST['imgBase64']);
    $data = base64_decode($base64);
    file_put_contents(dirname(__FILE__)."/". $_GET['file'].".png", $data);
?>

Answer 1

捕获画布时，您捕获的是位图，而不是元素。 CSS只影响元素 - 与普通图像一样，旋转它实际上不会以任何方式改变原始图像。

为了正确执行此操作，请先删除CSS旋转。

然后使用上下文的变换方法应用旋转。请注意，CSS默认围绕中心旋转。在左上角旋转的画布不是这种情况，所以我们需要先翻译。

以下是步骤：

// translate to center where the rotation will take place:
context.translate(context.canvas.width * 0.5, context.canvas.height * 0.5);

// rotate (uses radians)
context.rotate = -32.5 * 180 / Math.PI;

// translate back as image is drawn from (0,0)
context.translate(-context.canvas.width * 0.5, -context.canvas.height * 0.5);

// draw image
context.drawImage(imageObj, 0, 0);

可选地，如果图像与画布的大小不对应，请使用图像的大小进行向后翻译。

context.translate(context.canvas.width * 0.5, context.canvas.height * 0.5);
context.rotate = -32.5 * 180 / Math.PI;
context.drawImage(imageObj, -imageObj.width * 0.5, -imageObj.height * 0.5);

现在，您可以使用旋转图像捕获画布。

请注意，此大小的画布可能无法在所有浏览器中使用，如果是这样，它可能无法捕获数据，因为某些浏览器的大小限制。只是想到的东西..

Answer 2

您可以使用localStorage执行此操作，但出于安全原因，不能使用文件。

如何将旋转的画布元素保存到文件中

2 个答案: