Код должен выводить с помощью цикла картинки и по клику картинка открывается в модальном окне в котором можно нажав в любое место картинки узнать её RGB и HEX. Проблема в том что в модальное окно не передается картинка. Почему-то переменная из цикла не передается в переменную в javascript.
<?php
$dir = 'img/'; // Папка с изображениями
$cols = 3; // Количество столбцов в будущей таблице с картинками
$files = scandir($dir); // Берём всё содержимое директории
//echo "<div class='row'>"; //
$k = 0; //
for ($i = 0; $i < count($files); $i++) { // Перебираем все файлы
if (($files[$i] != ".") && ($files[$i] != "..")) { // Текущий каталог и родительский пропускаем
if ($k % $cols == 0) ; // Добавляем новую строку
echo "<div class='col-xs-6 col-sm-4 col-md-3 col-lg-3'>";
echo "<div class='thumbnail'>"; //
$path = $dir.$files[$i]; // Получаем путь к картинке
echo "<a data-toggle='modal' data-target='#myModal$i'>"; // Делаем ссылку на картинку
echo "<img src='$path' alt='' width='300' height='240' />"; // Вывод превью картинки
echo "</a>"; // Закрываем ссылку
echo "</div>";
echo "</div>";
echo " <div class='modal fade' id='myModal$i' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-title' id='myModalLabel'>Название модали</h4>
</div>
<div class='modal-body'>
<canvas width='600' height='440' id='canvas_picker'></canvas>
<div id='hex'>HEX: <input type='text'></input></div>
<div id='rgb'>RGB: <input type='text'></input></div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Закрыть</button>
<button type='button' class='btn btn-primary'>Сохранить изменения</button>
</div>
</div>
</div>
</div>";
echo "<script type='text/javascript'>
var canvas = document.getElementById('canvas_picker').getContext('2d');
// create an image object and get it’s source
var img = new Image();
img.src = '".$path."'; // image credit: http://pixabay.com/en/fishing-boat-denmark-beach-sea-49523/
// copy the image to the canvas
$(img).load(function(){
canvas.drawImage(img,0,0);
});
// http://www.javascripter.net/faq/rgbtohex.htm
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(n) {
n = parseInt(n,10);
if (isNaN(n)) return '00';
n = Math.max(0,Math.min(n,255));
return '0123456789ABCDEF'.charAt((n-n%16)/16) + '0123456789ABCDEF'.charAt(n%16);
}
$('#canvas_picker').click(function(event){
// getting user coordinates
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
// getting image data and RGB values
var img_data = canvas.getImageData(x, y, 1, 1).data;
var R = img_data[0];
var G = img_data[1];
var B = img_data[2]; var rgb = R + ',' + G + ',' + B;
// convert RGB to HEX
var hex = rgbToHex(R,G,B);
// making the color the value of the input
$('#rgb input').val(rgb);
$('#hex input').val('#' + hex);
});
</script>";
// echo "</div>"; // Закрываем столбец
/* Закрываем строку, если необходимое количество было выведено, либо данная итерация последняя */
if ((($k + 1) % $cols == 0) || (($i + 1) == count($files)));
$k++; // Увеличиваем вспомогательный счётчик
}
}
?>
В консоле говорит, что ошибка в
$(img).load(function(){
canvas.drawImage(img,0,0);
});
Только хз как ее убрать. Помогите пожалуйста.
В html как будто бы все нормально и переменная php передает значение, но javascript не хочет с ней работать. Вот код страницы:
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class='col-xs-6 col-sm-4 col-md-3 col-lg-3'><div class='thumbnail'><a data-toggle='modal' data-target='#myModal2'><img src='img/006.jpg' alt='' width='300' height='240' /></a></div></div> <div class='modal fade' id='myModal2' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-title' id='myModalLabel'>Название модали</h4>
</div>
<div class='modal-body'>
<canvas width='600' height='440' id='canvas_picker'></canvas>
<div id='hex'>HEX: <input type='text'></input></div>
<div id='rgb'>RGB: <input type='text'></input></div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Закрыть</button>
<button type='button' class='btn btn-primary'>Сохранить изменения</button>
</div>
</div>
</div>
</div><script type='text/javascript'>
var canvas = document.getElementById('canvas_picker').getContext('2d');
// create an image object and get it’s source
var img = new Image();
img.src = 'img/006.jpg'; // image credit: http://pixabay.com/en/fishing-boat-denmark-beach-sea-49523/
// copy the image to the canvas
$(img).load(function(){
canvas.drawImage(img,0,0);
});
// http://www.javascripter.net/faq/rgbtohex.htm
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(n) {
n = parseInt(n,10);
if (isNaN(n)) return '00';
n = Math.max(0,Math.min(n,255));
return '0123456789ABCDEF'.charAt((n-n%16)/16) + '0123456789ABCDEF'.charAt(n%16);
}
$('#canvas_picker').click(function(event){
// getting user coordinates
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
// getting image data and RGB values
var img_data = canvas.getImageData(x, y, 1, 1).data;
var R = img_data[0];
var G = img_data[1];
var B = img_data[2]; var rgb = R + ',' + G + ',' + B;
// convert RGB to HEX
var hex = rgbToHex(R,G,B);
// making the color the value of the input
$('#rgb input').val(rgb);
$('#hex input').val('#' + hex);
});
</script><div class='col-xs-6 col-sm-4 col-md-3 col-lg-3'><div class='thumbnail'><a data-toggle='modal' data-target='#myModal3'><img src='img/007.jpg' alt='' width='300' height='240' /></a></div></div> <div class='modal fade' id='myModal3' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-title' id='myModalLabel'>Название модали</h4>
</div>
<div class='modal-body'>
<canvas width='600' height='440' id='canvas_picker'></canvas>
<div id='hex'>HEX: <input type='text'></input></div>
<div id='rgb'>RGB: <input type='text'></input></div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Закрыть</button>
<button type='button' class='btn btn-primary'>Сохранить изменения</button>
</div>
</div>
</div>
</div><script type='text/javascript'>
var canvas = document.getElementById('canvas_picker').getContext('2d');
// create an image object and get it’s source
var img = new Image();
img.src = 'img/007.jpg'; // image credit: http://pixabay.com/en/fishing-boat-denmark-beach-sea-49523/
// copy the image to the canvas
$(img).load(function(){
canvas.drawImage(img,0,0);
});
// http://www.javascripter.net/faq/rgbtohex.htm
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(n) {
n = parseInt(n,10);
if (isNaN(n)) return '00';
n = Math.max(0,Math.min(n,255));
return '0123456789ABCDEF'.charAt((n-n%16)/16) + '0123456789ABCDEF'.charAt(n%16);
}
$('#canvas_picker').click(function(event){
// getting user coordinates
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
// getting image data and RGB values
var img_data = canvas.getImageData(x, y, 1, 1).data;
var R = img_data[0];
var G = img_data[1];
var B = img_data[2]; var rgb = R + ',' + G + ',' + B;
// convert RGB to HEX
var hex = rgbToHex(R,G,B);
// making the color the value of the input
$('#rgb input').val(rgb);
$('#hex input').val('#' + hex);
});
</script><div class='col-xs-6 col-sm-4 col-md-3 col-lg-3'><div class='thumbnail'><a data-toggle='modal' data-target='#myModal4'><img src='img/008.jpg' alt='' width='300' height='240' /></a></div></div> <div class='modal fade' id='myModal4' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-title' id='myModalLabel'>Название модали</h4>
</div>
<div class='modal-body'>
<canvas width='600' height='440' id='canvas_picker'></canvas>
<div id='hex'>HEX: <input type='text'></input></div>
<div id='rgb'>RGB: <input type='text'></input></div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Закрыть</button>
<button type='button' class='btn btn-primary'>Сохранить изменения</button>
</div>
</div>
</div>
</div><script type='text/javascript'>
var canvas = document.getElementById('canvas_picker').getContext('2d');
// create an image object and get it’s source
var img = new Image();
img.src = 'img/008.jpg'; // image credit: http://pixabay.com/en/fishing-boat-denmark-beach-sea-49523/
// copy the image to the canvas
$(img).load(function(){
canvas.drawImage(img,0,0);
});
// http://www.javascripter.net/faq/rgbtohex.htm
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(n) {
n = parseInt(n,10);
if (isNaN(n)) return '00';
n = Math.max(0,Math.min(n,255));
return '0123456789ABCDEF'.charAt((n-n%16)/16) + '0123456789ABCDEF'.charAt(n%16);
}
$('#canvas_picker').click(function(event){
// getting user coordinates
var x = event.pageX - this.offsetLeft;
var y = event.pageY - this.offsetTop;
// getting image data and RGB values
var img_data = canvas.getImageData(x, y, 1, 1).data;
var R = img_data[0];
var G = img_data[1];
var B = img_data[2]; var rgb = R + ',' + G + ',' + B;
// convert RGB to HEX
var hex = rgbToHex(R,G,B);
// making the color the value of the input
$('#rgb input').val(rgb);
$('#hex input').val('#' + hex);
});