Как сохранить повернутый элемент холста в файл

Я пытаюсь повернуть большое изображение и сохранить его как файл. Я пробовал несколько методов, которые выходят из строя из-за большого размера изображения. (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); 
?>

источник

2015-03-23 svenyonson

Если это одноразовый проект, вы можете подписаться на 30-дневную пробную версию Photoshop, чтобы легко достичь своей цели. – markE

Когда вы снимаете холст, вы захватываете растровое изображение, а не элемент. 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);

Теперь вы можете захватить холст с повернутым изображением.

Обратите внимание, что холст такого размера может не работать во всех браузерах, и если он это делает, он может не позволить вам записывать данные-uri, поскольку некоторые браузеры имеют ограничения по размеру для этих браузеров. Просто что-то иметь в виду.

источник

2015-03-23 19:50:39 K3N

«Теперь вы можете захватить холст с повернутым изображением». - любой шанс, который вы могли бы расширить на этом. Как вы «извлекаете» изображение холста и отправляете его обратно в фоновый режим для сохранения? –

Вы можете сделать это с localStorage, но не с файлом по соображениям безопасности.

источник

2015-03-23 15:55:25

Локальное хранилище не поможет. Это механизм хранения, а не инструмент преобразования изображений. Кроме того, svenyonson говорит, что файл очень большой, а localStorage имеет небольшой размер файла - я считаю, что 10 Мб или около того. – markE

Как сохранить повернутый элемент холста в файл

ответ

Смежные вопросы