Страницы

Поиск по вопросам

четверг, 14 февраля 2019 г.

Не принимает id переменная [закрыт]

Не принимает 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); });


Ответ

Из приведённых фрагментов кода не совсем понятно, какая часть из них находится внутри обработчика событий кликов по изображениям (или вы действительно только меняете 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/

Комментариев нет:

Отправить комментарий