Output wideimage to page

Question

I'm trying to use the WideImage plugin and loading an image into it, resizing it, and then outputting it in the following form:

<img class="image" src="image.jpg" />

I have this so far:

<?php
  $image = WideImage::load('image.jpg');
  $resizedImage = $image->resize(150, 150, 'outside')->crop('center', 'middle', 150, 150);
?>

How can I output the resized image so that it's in the form above? Help!

MZaragoza · Answer 1 · 2013-09-24T01:34:15.413

1

Resize

You can resize images by passing a few parameters to the resize() method. The first two are the new dimensions of the image, and can be smart coordinate values. If one dimension isn’t specified (or null is given), it’s calculated from the ratio of the other dimension.

Resize an image into a 400×300 box. By default, resizing keeps the original image’s aspect ratio and the resulting image fits the given dimensions from the inside.

$resized = $image->resize(400, 300);

This is equal to passing ‘inside’ as $fit value.

$resized = $image->resize(400, 300, 'inside');

Resize an image to fit a 400×300 box from the outside by passing ‘outside’ to $fit parameter. This means that the image will be at least as big as 400×300, and aspect ratio will be kept.

$resized = $image->resize(400, 300, 'outside');

Resize an image to exactly fit a 400×300 box by passing ‘fill’ as the value of $fit parameter. The image will be stretched as necessary, aspect ratio may not be kept.

$resized = $image->resize(400, 300, 'fill');

The fourth parameter ($scale) determines when to scale an image. Possible values include any (default), down and up:

down – resize if image is larger than the new dimensions
up – resize if image is smaller than the new dimensions
any – resize regardless of the image size

There are two aliases for the resize method: resizeUp and resizeDown. These two are equal to calling resize() with $scale = ‘up’ and $scale = ‘down’ respectively.

$resized = $image->resize(350, 500, 'inside', 'down');
// is equal to
$resized = $image->resizeDown(350, 500, 'inside');

in your HTML add

<img src= "<?= $resized ?>"> – Moises Zaragoza just now edit

edited Sep 24 '13 at 01:34

answered Sep 24 '13 at 01:05

MZaragoza

10,108
9
71
116

Thanks for the copy and paste, but that doesn't solve my problem. I need a way to output the image to the page in the format I specified... – Burrows Sep 24 '13 at 01:10
– MZaragoza Sep 24 '13 at 01:33
What is the value of your `$resizedImage` – MZaragoza Sep 24 '13 at 01:37
A bunch of gibberish. `�PNG IHDR�� ł IDATx�\�]�e�q��j�s��~�{�G)��,�d��l˱9��/��@��)�a��0��pNb'QC�"'�mY��DR�ȡ�!9��t��s�9gWU��>�كAw�}��{��U�V�Z��Dp83D '��N07� "8��Lf��(R0Պi��:��7��C��)TD3�aC��L` There's more but it wouldn't fit. – Burrows Sep 24 '13 at 01:46
@Moises Zaragoza I have the same problem with that output. Did someone fix it yet? – SBD Aug 29 '14 at 12:28
@MoisesZaragoza I got it working in a seperate file. I tried to create a function which expects an image url and then return this code : `$path = ('../images/556571_306543022817250_1428802005_n.jpg'); $image = WideImage::load($path); $resized = $image->resize(185, 120); $resized->output('jpg');` That gives me the weird characters. Now I saw that in the image source the reference is not the image, but the file itself. In my case I have lots of images I want to resize. Do you know how I can do this? Many thanks :) – SBD Aug 29 '14 at 20:55

score 1 · Answer 2 · answered Dec 07 '15 at 16:09

The problem is that the browser attempts to read the image as if it was text, more specifically an html document. To solve it I would create a new php script for the image processing, let's say image.php, with a function taking the image path and also the parameters of the modification. In the end just show the image as you did before, just be sure to change the header of the content to something like:

 header('Content-type: image/jpg');

or

header('Content-type: image/png');

With that the browser will know how to interpret the data received.

score 1 · Answer 3 · answered Apr 20 '18 at 00:46

First you have to save the resized image as a file. In you php put:

<?php
    $image = WideImage::load('image.jpg');
    $resizedImage = $image->resize(150, 150, 'outside')->crop('center', 'middle', 150, 150);
    $resizedImage ->saveToFile('resized_image.jpg');
?>

Then make your image reference the new file:

<img class="image" src="resized_image.jpg" />

Output wideimage to page

3 Answers3