Asked  7 Months ago    Answers:  5   Viewed   33 times

I have a defined fixed width and height to resize an image. However, I have problem a with this, because the image can have any kind of size ratio (it can be vertical or the horizontal). In this case, fixed width and height cause a problem. I want to calculate width and height in a smarter way.

For example lets say I have defined width 1024px and height 768px. And I want to resize an image which is vertical (height 1100px and width 200px). So in my case it will resize to fixed size (1024x768), so the width will be increased from 100px to 768px, and it will be very ugly. Similarly if the image has height less than 768px, it will increase the height by force to 768px.

Therefore I would like to calculate the new image size based on the original image size ratio. Lets say if the above example image should be resized to maximum height of 768px, but then what about the width? it's already less than my "maximum width", which is 200px, so should the width remain unchanged? or should it be further decreased?

Similarly, if the image has the height 200px, and the width 1100px. So the width should be decreased to 1024px, but what about the height?

The third problem is that, let's suppose if both height and width are more than the maximum height and maximum width, let's say width: 1100px and height:4000px. Now since width and height both are more than the maximum width and maximum height but the image is vertical, it will make it horizontal. So how can I check if in this case if I should resize the image according to maximum height, or according to maximum width?

I appreciate any help with this.



Here's code from my personal grab bag of image resizing code. First, data you need:

list($originalWidth, $originalHeight) = getimagesize($imageFile);
$ratio = $originalWidth / $originalHeight;

Then, this algorithm fits the image into the target size as best it can, keeping the original aspect ratio, not stretching the image larger than the original:

$targetWidth = $targetHeight = min($size, max($originalWidth, $originalHeight));

if ($ratio < 1) {
    $targetWidth = $targetHeight * $ratio;
} else {
    $targetHeight = $targetWidth / $ratio;

$srcWidth = $originalWidth;
$srcHeight = $originalHeight;
$srcX = $srcY = 0;

This crops the image to fill the target size completely, not stretching it:

$targetWidth = $targetHeight = min($originalWidth, $originalHeight, $size);

if ($ratio < 1) {
    $srcX = 0;
    $srcY = ($originalHeight / 2) - ($originalWidth / 2);
    $srcWidth = $srcHeight = $originalWidth;
} else {
    $srcY = 0;
    $srcX = ($originalWidth / 2) - ($originalHeight / 2);
    $srcWidth = $srcHeight = $originalHeight;

And this does the actual resizing:

$targetImage = imagecreatetruecolor($targetWidth, $targetHeight);
imagecopyresampled($targetImage, $originalImage, 0, 0, $srcX, $srcY, $targetWidth, $targetHeight, $srcWidth, $srcHeight);

In this case the $size is just one number for both width and height (square target size). I'm sure you can modify it to use non-square targets. It should also give you an inspiration on what other resizing algorithms you can use.

Wednesday, March 31, 2021
answered 7 Months ago

I doubt that your /assets directory is located on the root of the file-system. It is probably in the root of the web-server, so you could use something like:

$pic2Path = $_SERVER['DOCUMENT_ROOT'] . '/assets/images/reviews/' . $_FILES['TheImage'];
Saturday, May 29, 2021
answered 5 Months ago

Tested your script with string hello and it works

image generated

Am very sure the issue is that PHP can not located the font .. try using full system path


$font = dirname ( __FILE__ ) . "/verdana.ttf" ;
    die("Missing Font");
Saturday, May 29, 2021
answered 5 Months ago

SVG is a vector image format, so converting a raster image (jpg, png, gif etc.) to svg can be a complex task.

I tried to convert a simple image: white background with a red circle and a blue square using:

convert input.png output.svg

here's a sample from the svg file created by this command:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "">
<svg width="800" height="600">
  <circle cx="0" cy="0" r="1" fill="white"/>
  <circle cx="1" cy="0" r="1" fill="white"/>
  <circle cx="218" cy="151" r="1" fill="rgb(255,247,247)"/>
  <circle cx="219" cy="151" r="1" fill="rgb(255,40,40)"/>
  <circle cx="220" cy="151" r="1" fill="red"/>
  <circle cx="221" cy="151" r="1" fill="rgb(255,127,127)"/>
  <circle cx="222" cy="151" r="1" fill="white"/>
  <circle cx="223" cy="151" r="1" fill="white"/>
  <circle cx="799" cy="599" r="1" fill="white"/>

basically ImageMagick created a 1px radius circle for each pixel, painting it in the correct color. Starting from a 5KB png my output was a 22MB svg, this explains the huge file size you obtained.

According to ImageMagick documentation (see here) this happens because "AutoTrace" (see here) library is missing:

"If the "AutoTrace" library is not installed and compiled into IM, then the SVG output generated will be a huge number of single pixel circles, generating a binary result, rather than a smooth SVG outlined image. Such images are huge by comparision, and often take a very long time to render by by SVG render."

once you have installed AutoTrace library you can try with something like this:

convert autotrace:A.gif  A_traced.png
Thursday, August 5, 2021
answered 3 Months ago

Well thank you @Erick Robertson Changed a litte bit, but now it works!

Here is the changed code:

if (bwidth / swidth <  bheight / sheight) {
    new_width = swidth;
    new_height = (int) Math.floor((double) bheight 
                                  * (double) swidth / (double) bwidth);
} else {
    new_height = sheight;
    new_width = (int) Math.floor((double) bwidth 
                                 * (double) sheight / (double) bheight);
Thursday, October 14, 2021
answered 4 Days ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :