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

或者，它可能在PHP中通過簡單地直接打印寬度到div來完成：

<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