如何在 JS / jQuery 上裁剪具有透明背景的 JPG 和 PNG答案

【问题标题】：How to crop JPG and PNG with transparent background on JS / jQuery如何在 JS / jQuery 上裁剪具有透明背景的 JPG 和 PNG
【发布时间】：2011-11-14 03:56:12
【问题描述】：

我正在使用一个名为“jcrop”的插件，它非常好，你可以在这里看到它：

http://howhack.com/crop/demos/crop2.php

问题是这个插件不支持透明背景的png。

javascript/jQuery中是否有类似的脚本/插件支持透明背景的png？

我需要这个长宽比为 16:9 且最终图像始终为 640x360 的矩形，这就是我尝试使用这个“jcrop”的原因。

【问题讨论】：

因为纵横比必须固定为 16:9 而你不知道用户想要显示图像的哪一部分，甚至像你说的那样做透明背景也不会有://

标签： javascript jquery png crop jcrop

【解决方案1】：

您可以更轻松地使用画布进行操作，如果您想保存它，只需通过邮寄将原始画布数据发送到服务器？ http://www.nihilogic.dk/labs/canvas2image/

但是如果你想使用这个插件，我建议你看看你服务器的 php 配置。许多服务器仍然只支持 jpeg 和 gif 作为其默认 php 配置的一部分。如果你想检查这个，请创建一个包含以下代码的 php 文件：

phpinfo();

然后上传并在您的服务器上查看。您应该在页面上查找“libpng”： http://www.php.net/manual/en/image.requirements.php

【讨论】：

谢谢Alex，但这不是我需要的，我需要精确，用户必须能够准确地选择图像的哪一部分，然后图像将被保存为一个新文件。如果我可以使用画布，我就不会在这里询问如何做到这一点。无论如何我会检查phpinfo。
@NerdsTalk：Alex 是正确的，这可以通过画布元素来完成。根据源数据的存储位置（在服务器上或本地用户计算机上），您可能想要也可能不想这样做。您可以在操作后将画布图像本地提供给浏览器，以便可以保存它。如果您需要在服务器上存档裁剪的图像，您可能应该坚持使用 PHP。

【解决方案2】：

我假设插件通过 PHP 在服务器上编辑图像？如果是这样，您需要进行一些特殊调用来保留 PNG 图像中的 alpha 透明度：

$x = $_GET["x"];
$y = $_GET["y"];
$w = $_GET["w"];
$h = $_GET["h"];

// Load the original image.
$img = imagecreatefrompng($img_path);
imagealphablending($img, true);

// Create a blank canvas for the cropped image.
$img_cropped = imagecreatetruecolor($w, $h);
imagesavealpha($img_cropped, true);
imagealphablending($img_cropped, false);
$transparent = imagecolorallocatealpha($img_cropped, 0, 0, 0, 127);
imagefill($img_cropped, 0, 0, $transparent);

// Crop the image and store the data on the blank canvas.
imagecopyresampled($img_cropped, $img, 0, 0, $x, $y, $w, $h, $w, $h); // or imagecopy()

// Save the image.
imagepng($img_cropped, "image_cropped.png", 2);

// Free memory.
imagedestroy($img);
imagedestroy($img_cropped);

这在讨论 PHP 的 imagecopyresampled() here 时曾多次提及。

【讨论】：