Не принимает 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/
Комментариев нет:
Отправить комментарий