Output wideimage to page - php

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!

Answer 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

Answer 2

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.

Answer 3

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" />