public static function printCanvasMosaic($img, $cell_size, $keywords)
{
$imagew = imagesx($img);
//Get image width, height.
$imageh = imagesy($img);
$mosaic_width = $imagew * $cell_size;
//See generateSuccess() in actions.class.php, where $image_w is set to $mosaic_w / $cell_size.
$mosaic_height = $imageh * $cell_size;
echo "<canvas width='{$mosaic_width}" . "px' height='{$mosaic_height}" . "px'> </canvas> \n\t\t<script>\n\t\tvar canvas = document.querySelector('canvas');\n\t\tvar ctx = canvas.getContext('2d')\t\t\t\t\n\t\t";
//These two variables are available globally in JS.
$mosaic_array = array();
//Matrix of rows and columns of colors, which will be replaced by images.
for ($y = 0; $y < $imageh; $y++) {
$moisac_array[$y] = array();
for ($x = 0; $x < $imagew; $x++) {
$rgb = imagecolorat($img, $x, $y);
//The color at this specific pixel.
$r = $rgb >> 16 & 0xff;
//Converts to RGB. I got this explained at http://stackoverflow.com/q/11570312/805556.
$g = $rgb >> 8 & 0xff;
$b = $rgb & 0xff;
// converting decimal rgb into hex
$pos_x = $x * $cell_size;
//The position in the canvas.
$pos_y = $y * $cell_size;
$css_color = str_pad(dechex($r), 2, "0", STR_PAD_LEFT) . str_pad(dechex($g), 2, "0", STR_PAD_LEFT) . str_pad(dechex($b), 2, "0", STR_PAD_LEFT);
//convert rgb into css
$rounded_hex_color = MosaicGenerator::roundHexColor($css_color);
//Now we round the color.
$mosaic_array[$y][$x] = $rounded_hex_color;
//And add this rounded color to our matrix of pixels.
}
}
echo "\n\t\t\t\tvar mosaic_array = " . json_encode($mosaic_array) . ";\n\t\t\t\tvar cell_size = " . $cell_size . ";\n\t\t\t\tvar search_keywords = '" . $keywords . "';\n\t\t\t\t</script>";
//We pass the color matrix, the size of each image, and the keywords to Javascript as global vars.
}
//noname: AIzaSyC9VwjNP3Yrk0pdsQeidKMuVJhnj70OfA0
use_javascript("https://www.google.com/jsapi?key=AIzaSyC9VwjNP3Yrk0pdsQeidKMuVJhnj70OfA0");
//See https://code.google.com/apis/console/#project:326513611386:overview
use_javascript("formatted_colors.js");
use_javascript("google_images.js");
//use_javascript("jquery-ui.js");
//use_stylesheet("jquery-ui.css");
use_javascript("base64.js");
use_javascript("canvas2image.js");
if (isset($img_path)) {
?>
<div class="mosaic-wrapper">
<?php
$img = ImageManipulation::imagecreatefrom($img_path);
//Returns Image object.
MosaicGenerator::printCanvasMosaic($img, $cell_size, $keywords);
//Defines three Javascript variables: The color matrix, the size of each image, and the keywords.
?>
<script src="/js/generate_mosaic.js"> </script> <!-- Picks up three variables from printCanvasMosaic(), creates canvas mosaic !-->
<div class="mosaic-actions">
<div class="tweak-size">
<p>Mosaic Size: </p>
<select>
<option value="300">Small </option>
<option value="600" selected>Medium </option>
<option value="900">Large </option>
<option value="1600">Huge </option>
</select>
<br>
(
