1

Код должен выводить с помощью цикла картинки и по клику картинка открывается в модальном окне в котором можно нажав в любое место картинки узнать её 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'>&times;</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'>&times;</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'>&times;</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'>&times;</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);
    });
3
  • Точно? Вы уверены? на 100% уверены? А что за ошибку выдает тогда? А отдельно переменную эхом выдает? Скопировал ваш код - работает.Он до жути страшный, но работает Commented 16 дек. 2015 в 11:03
  • @Алексей Шиманский, выдает, но javascript то ли ее не принимает или еще что . Вот скрин pixs.ru/showimage/qqwwpng_4065835_19895466.png
    – x_decimo_x
    Commented 16 дек. 2015 в 11:32
  • Пути к картинкам относительные, возможно из-за этого не грузятся. Надо посмотреть html код страницы и убедиться что ссылки рабочие. Commented 16 дек. 2015 в 12:25

1 ответ 1

1

Попробуйте '$path' заменить на " . $path . "

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.