让用户手动裁剪具有特定尺寸的图像作为输出答案

【问题标题】：let user manually crop image with specific size as output让用户手动裁剪具有特定尺寸的图像作为输出
【发布时间】：2012-07-24 00:58:00
【问题描述】：

我正在尝试在以下教程中找到一些插件：我希望我网站上的用户可以上传一张图片，该图片将用作缩略图，虽然缩略图具有特定的高度/宽度，但应该裁剪图像。

虽然因为这些图像将是人物本身的图像，但我不能简单地自动裁剪它。我需要一些东西，让用户可以选择使用图像的哪一部分。例如，他们可以选择他们的头部作为个人资料图片。

提前致谢！

【问题讨论】：

不要尝试使用 Javascript 进行图像处理。你需要一些服务器端的东西，比如 PHP 的 gd2。
ic，虽然我一直在寻找一些将用作新图像的区域选择器。
如果你使用 jQuery，jCrop 是一个很棒的插件。
jCrop 有一个缩略图功能，这正是我所需要的，虽然我找不到任何关于如何将输出保存为服务器上的文件的教程：S

标签： javascript html image thumbnails crop

【解决方案1】：

在 php & imagejpg（使用 GD）中你可以这样做：

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $targ_w = $targ_h = 150;
    $jpeg_quality = 80;

    $src = 'upload/test.jpg';
    $img_r = imagecreatefromjpeg($src);
    $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

    imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
            $targ_w,$targ_h,$_POST['w'],$_POST['h']);

    imagejpeg($dst_r, 'path/to/output.jpg', $jpeg_quality);

    exit;
}

除了 GD，您还可以使用 ImageMagick 根据您发送回服务器的画布坐标进行服务器端处理。

但是...您也可以从 canvas 发送原始数据。canvas 可以将 jpg（客户端）渲染到，然后您对其进行 base64 编码并上传（再次，但这次是在画布）。

希望这会有所帮助！

【讨论】：