使用PHP或Javascript裁剪图像

Question

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

Answer 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'

或者只需将宽度直接打印到div：

就可以在PHP中完成

<div id="progressbar" width="<?php echo $percent_done*200;?>px"></div>

Answer 2

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

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

Answer 3

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

使用JavaScript裁剪图像可以使用<canvas>（请参阅Copy and crop images in 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