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> (