4

Не принимает id переменная. Есть код, который при нажатии на объект(в моем случае я нажимаю на изображения) получает id этого объекта:

var id;
    document.querySelector('#rm').addEventListener('click', function(e){ // Вешаем обработчик клика на UL, не LI
     id = e.target.id; // Получили ID, т.к. в e.target содержится элемент по которому кликнули
    });

И мне нужно полученное id поместить в переменную, чтобы через нее получить адрес изображения. Я делаю это так :

var a = document.getElementById(id);//получаю доступ к его свойствам
var canvas = document.getElementById('canvas_picker').getContext('2d');

// create an image object and get it’s source
var img = new Image();
img.src = a.src; // помещаю адрес картинки. Тут у меня и не работает!!! 

// copy the image to the canvas
$(img).load(function(){
  canvas.drawImage(img,0,0);
});

Весь код, который при клике на любой участок изображение можно получить код цвета в HEX и RGB:

var canvas = document.getElementById('canvas_picker').getContext('2d');

    // create an image object and get it’s source
    var img = new Image();
    img.src = a.src; // помещаю адрес картинки. Тут у меня и не работает!!!

    // 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);
    });
5
  • Простите пожалуйста, но вот у вас код javascript. Когда какие-либо ошибки возникают в таком коде можно всегда открыть консоль браузера и посмотреть, что за ошибки выдает. Почему вы этого не делаете? 26 дек 2015 в 10:50
  • @Алексей Шиманский, в консоле выводит: Uncaught TypeError: Cannot read property 'src' of null
    – x_decimo_x
    26 дек 2015 в 11:06
  • таааак. И что это значит? Почему бы не последовать дальше по логике? значит в a нет src со значением....... значит при выборке getElementById(id) ничего не происходит.....значит с id что-то не так. Правильно?.....а почему так происходит? Может быть потому, что id значение присваивается только по клику, а другой код исполняется уже сразу при загрузке странице? Debug яваскрит кода также доступен в браузере, кстати 26 дек 2015 в 11:26
  • @Алексей Шиманский, а как это исправить?
    – x_decimo_x
    26 дек 2015 в 12:31
  • ставьте через DevTools на нужной строчке breakpoint и в консоли руками ищите решение :)
    – Invision
    26 дек 2015 в 16:28

1 ответ 1

5

Из приведённых фрагментов кода не совсем понятно, какая часть из них находится внутри обработчика событий кликов по изображениям (или вы действительно только меняете id?). У меня ваш код работает в таком виде:

var id, img, a,
canvas = document.getElementById('canvas_picker').getContext('2d');

document.querySelector('#rm').addEventListener('click', function(e) {
     id = e.target.id; 
     a = document.getElementById(id);
     img = new Image();
     $(img).load(function(){
            canvas.drawImage(img,0,0);
     });
     img.src = a.src;
    });

https://jsfiddle.net/du5ns2ug/

3
  • Не совсем непонятно :)
    – Nick Volynkin
    26 дек 2015 в 22:03
  • 1
    @NickVolynkin да... была напугана)) спасибо :)
    – alenkins
    27 дек 2015 в 7:36
  • 1
    первая формулировка была точнее и выразительнее ))
    – Nick Volynkin
    27 дек 2015 в 8:47

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