Cropping an image with PHP or Javascript

Question

I have an image called 'progressbar.png'. Is there a way that I could crop this image, with PHP or Javascript, each time the page loads the image will crop depending on the progress percentage and be loaded into the page. For example, if the image was 200px wide, at 25% progress the image would be cropped to only 50px wide.

There are [a lot of plugins that actually do this](http://docs.jquery.com/UI/Progressbar) already — Joseph, Jun 28 '12 at 02:14
Don't crop, just use HTML div and change the width with javascript — dukevin, Jun 28 '12 at 02:14
@Joseph the Dreamer Do you have anything for PHP? Because that would be my preferred method. However, thank you for the link and I shall look into it. — danieljmt, Jun 28 '12 at 02:15
possible duplicate of [How to make a progress bar](http://stackoverflow.com/questions/3951903/how-to-make-a-progress-bar) — , Jun 28 '12 at 02:15
@Kevin Duke Correct me if I'm wrong, but that only resizes it. I wish for the right end to be cut off or the progress bar would look strange. — danieljmt, Jun 28 '12 at 02:16
@Majid Fouladpour Is that relevant? I just need to be able to crop an image's width to a given percentage, whatever it may be. — danieljmt, Jun 28 '12 at 02:17
@DanielMarshall progress bar of what? live data? file upload? or static percentage image? — Joseph, Jun 28 '12 at 02:22
@DanielMarshall , my solution will crop your image. NOT resize it. Background images are not resized if they do not fit in the element, they're cut off. — Sean Johnson, Jun 28 '12 at 02:31
Well, you sounded as if you meant page load progress, which would make a whole lot of difference. — Majid Fouladpour, Jun 28 '12 at 06:23

Sean Johnson · Accepted Answer · 2012-06-28T02:20:34.357

3

Make a div, set the background of the div to your image, and manipulate the div's width to whatever you want.

HTML:

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

CSS:

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

Javascript:

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

Or it could be done in PHP by simply printing out the width directly to the div:

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

edited Jun 28 '12 at 02:20

answered Jun 28 '12 at 02:15

Sean Johnson

5,567
2
17
22

3

Setting the background is a much better idea than wrapping an img tag. – amsprich Jun 28 '12 at 02:17

score 0 · Answer 2 · answered Jun 28 '12 at 02:15

0

You could wrap the img tag in a div. Use css to mark the overflow as hidden and javascript to dynamically set the width. However you may want to look into jQueryUI's progress bar instead.

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

answered Jun 28 '12 at 02:15

amsprich

201
1
8

score 0 · Answer 3 · edited May 23 '17 at 10:09

Cropping serverside (with PHP) would require a request for a new file each time the percentage changes.

Cropping an image with JavaScript can be done by using <canvas> (see Copy and crop images in Javascript), although this would be a huge overhead.

Just use CSS, it has a couple of techniques to show only a cutout of an element. See CSS Display an Image Resized and Cropped, Clip images with HTML and CSS or How to show a region on a image with CSS

BTW: There is usually no need to use an image for a progress bar. It is much easier with a simple DOM element appropriately styled, HTML5 even offers the <progress> tag. See How to make a progress bar

Cropping an image with PHP or Javascript

3 Answers3