使用 PHP 或 Javascript 裁剪图像 - Cropping an image with PHP or Javascript

Cropping an image with PHP or Javascript

本文关键字：裁剪图像 Javascript PHP 使用 | 更新日期: 2023-09-27

我有一张名为'progressbar.png'的图像。有没有办法让我使用 PHP 或 Javascript 裁剪此图像，每次页面加载时，图像都会根据进度百分比进行裁剪并加载到页面中。例如，如果图像宽度为 200px，则在 25% 的进度下，图像将被裁剪为仅 50px 宽。

制作一个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" width="<?php echo $percent_done*200;?>px"></div>

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

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

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

使用 JavaScript 裁剪图像

可以通过使用 <canvas> 来完成（请参阅在 Javascript 中复制和裁剪图像），尽管这将是一个巨大的开销。

只需使用CSS，它有几种技术可以仅显示元素的切口。请参阅 CSS 显示调整大小和裁剪的图像、使用 HTML 和 CSS 剪辑图像或如何使用 CSS 显示图像上的区域

顺便说一句：通常不需要将图像用作进度条。使用适当的样式设置简单的 DOM 元素要容易得多，HTML5 甚至提供了 <progress> 标签。请参阅如何制作进度条