让用户手动裁剪特定大小的图像作为输出
let user manually crop image with specific size as output
我正试图在教程中找到一些关于以下内容的插件:我希望我的网站上的用户可以上传一张图片,用作缩略图,尽管tumbnails有一个特定的高度/宽度,所以应该裁剪图像。
尽管因为这些图像将是个人本身的图像,我不能简单地自动复制。我需要一些东西,让用户可以选择使用图像的哪一部分。这样他们就可以选择自己的头部作为个人资料图像。
提前感谢!
在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编码并上传(再次,但这次是在canvas中创建的缩略图)。
希望这能有所帮助!
相关文章:
- 使用drawImage()在画布上输出固定大小的图像
- 使用Javascript将图像属性输出到控制台
- 使用 HTML 输出标记查看可缩放图像并分配 src
- 有没有办法在使用 html 输出标签时控制图像的大小
- 将图像输出到浏览器,然后再将其保存到文件夹
- 如何在Node.js中请求图像并输出图像
- 将7个图像组合为一个,一个在另一个之上,并输出为单个图像
- 让用户手动裁剪特定大小的图像作为输出
- JSPDF输出()不显示图像
- 在文本区域中输出图像
- 需要输出图像,具体取决于使用来自CharCode在javascript的输入框中键入的字母,任何想法
- 显示查询输出 HTML 中的图像
- 通过画布从 svg 或 svg 输出 300 张具有正确文件名的 png 图像
- 将GIF代码隐藏到GIF图像或输出到文件
- 重复svg图像输出TCPDF
- 可点击图片阵列图像输出大小-can't控制各个输出图片的尺寸
- 根据原始图像输出百分比调整预览图像的大小
- 如何在函数中使用画布图像,该函数首先操作然后将新操作的图像输出回用户
- 用HTML / JavaScript创建一个非图像输出的交互式序列图
- 如何从子文件夹页面(图像输出)直接主页(索引)