【问题标题】: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 编码并上传(再次,但这次是在画布)。

希望这会有所帮助!

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-04-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-11
    • 1970-01-01
    • 1970-01-01
    • 2010-12-26
    相关资源
    最近更新 更多