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

Question

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

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

提前致谢！

Answer 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 根据您发送回服务器的画布坐标进行服务器端处理。

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

希望这可以帮助！