时间戳

首页 > 解决方案 > 如何旋转图像然后保存新的旋转图像？

javascript - 如何旋转图像然后保存新的旋转图像？

问题描述

我正在尝试添加功能以在单击按钮时旋转图像，然后在单击提交按钮时图像将被保存旋转。所以它不能仅仅使用CSS在视觉上旋转，而是图像文件本身旋转然后保存在原始图像文件的顶部。

我正在考虑使用 PHP 使用imagerotate执行此操作，但仍然不能 100% 确定单击按钮时旋转图像的正确方法。然后在提交时保存该旋转按钮。

<?php
// File and rotation
$filename = 'test.jpg';
$degrees = 180;

// Content type
header('Content-type: image/jpeg');

// Load
$source = imagecreatefromjpeg($filename);

// Rotate
$rotate = imagerotate($source, $degrees, 0);

// Output
imagejpeg($rotate);

// Free the memory
imagedestroy($source);
imagedestroy($rotate);
?>

只是不确定如何获取上述代码并在单击按钮时使其工作。然后在单击提交按钮时保存。如果有一个使用 javascript/jquery 的更简单的解决方案，如果它是一个更简单/更好的实现，我也可以使用它。

标签： javascriptphpjqueryimageimage-manipulation

解决方案

如果要覆盖服务器上的原始图像文件，只需在最终的 imagejpeg() 调用中添加参数以指示要将结果保存到的位置：

imagejpeg($rotate, $filename);

请注意 JPEG 是一种有损格式，因此任何重新保存（即使您不旋转它）都会影响图像质量。您可以将图像质量指定为同一调用的第三个参数（如果您想以增加文件大小为代价尝试保留尽可能多的质量）：

imagejpeg($rotate, $filename, 90); // Saves at 90 quality

现在，如果这是处理客户端图像，那就另当别论了。PHP 在服务器上运行，因此它只能处理同一服务器上或可访问的图像。服务器上的 PHP 无法旋转和覆盖访问者机器上的图像。

为了实现这一点，图像必须从访问者上传到服务器，然后旋转，然后访问者需要手动将图像保存回他们自己的机器。PHP 不能接触访问者机器的文件系统，也不能强制访问者浏览器下载和覆盖现有文件。

因此，如果这一切都在服务器端，那么您拥有的 PHP 方法肯定会起作用。

推荐阅读