使用 PHP 或 Javascript 裁剪图像 [关闭]

Posted 2023-02-25

【中文标题】使用 PHP 或 Javascript 裁剪图像 [关闭]

【英文标题】：Cropping an image with PHP or Javascript [closed]

【发布时间】：2012-06-28 02:11:33

【问题描述】：

我有一个名为“progressbar.png”的图像。有没有一种方法可以使用 php 或 javascript 裁剪此图像，每次页面加载时，图像都会根据进度百分比进行裁剪并加载到页面中。例如，如果图像为 200 像素宽，则在 25% 的进度下，图像将被裁剪为仅 50 像素宽。

【问题讨论】：

已经有a lot of plugins that actually do this

不要裁剪，只需使用 html div 并使用 javascript 更改宽度

progress percentage of 什么？

@Joseph the Dreamer 你对 PHP 有什么要求吗？因为那将是我的首选方法。不过，谢谢你的链接，我会调查一下。

@DanielMarshall ，我的解决方案将裁剪您的图像。不要调整它的大小。如果背景图像不适合元素，则不会调整其大小，它们会被截断。

【参考方案1】：

制作一个 div，将 div 的背景设置为您的图像，然后将 div 的宽度调整为您想要的任何值。

HTML：

<div id="progressbar"></div>

CSS：

#progressbar
background:url(progressbar.png) top left;
height:progressbarheightpx;

Javascript：

document.getElementById('progressbar').style.width='50px'

或者也可以在 PHP 中通过简单地将宽度直接打印到 div 来完成：

<div id="progressbar" ></div>

【讨论】：

设置背景比包装一个 img 标签要好得多。

【参考方案2】：

您可以将 img 标签包装在一个 div 中。使用 css 将溢出标记为隐藏，使用 javascript 动态设置宽度。但是，您可能想查看 jQueryUI 的进度条。

http://jqueryui.com/demos/progressbar/

【参考方案3】：

每次百分比变化时，裁剪服务器端（使用 PHP）都需要一个新文件的请求。

可以使用<canvas>（参见Copy and crop images in Javascript）来使用JavaScript 裁剪图像，尽管这会产生巨大的开销。

只需使用 CSS，它有几种技术可以只显示元素的剪切。见CSS Display an Image Resized and Cropped、Clip images with HTML and CSS或How to show a region on a image with CSS

顺便说一句：进度条通常不需要使用图像。使用适当样式的简单 DOM 元素会容易得多，HTML5 甚至提供了<progress> 标签。见How to make a progress bar