выберите изображение из серии изображений и поместите его на холст в 1 функцию

Question

Я Алекс, и это мой первый вопрос переполнения стека.

У меня есть сценарий ниже. -Этот сценарий получает изображения из api. - для каждого изображения, полученного из api, создается элемент - для каждого изображения создается атрибут класса - для каждого изображения создается атрибут id. - для каждого изображения создается элемент. Для каждого из них я динамически добавляю событие onclick. каждый onclick связан со своей собственной функцией.

Функция anchor1,2,3,4 и 5 сделана так, что каждый раз, когда пользователь щелкает выбранное изображение, это изображение затем помещается в холст. Когда это будет сделано, цветной вор js начнет и отобразит цветовую палитру выбранного изображения.

Все это прекрасно работает.

То, что я хотел бы сделать, вместо функции для каждого изображения, состоит в том, чтобы иметь 1 функцию, которая поместила бы изображение, нажатое в холст. В принципе, я думаю, что мой код можно сделать менее избыточным.

// search the collection using a JSON call 
function search(query) { 
    return $.getJSON("https://www.rijksmuseum.nl/api/en/collection?q=Q&key=r4nzV2tL&imgonly=True&ps=5&format=json".replace("Q", query)); 

} 

var searchBtn = document.getElementById("search"); 
searchBtn.addEventListener("click", doSearch); 

var resultD = document.getElementById("result"); 
var searchField = document.getElementById("query"); 

//search function starts here 
function doSearch() { 
    $("#result").show(); // result div to show when making new search 
    resultD.innerHTML = ""; 
    var searchString = searchField.value; 
    if (searchString !== "") { 
    search(searchString).done(function(data) { 
     for (var artObj in data.artObjects) { 
     var rImg = document.createElement("img"); // create the image 
     rImg.setAttribute("crossOrigin", "Anonymous"); //needed so I can actually copy the image for later use 
     rImg.setAttribute("class", "imageClass"); //needed so I can actually copy the image for later use 
     var link = document.createElement("a"); // create the link 
     link.setAttribute('href', '#'); // set link path 
     // link.href = "www.example.com"; //can be done this way too 
     rImg.src = data.artObjects[artObj].webImage.url; // the source of the image element is the url from rijks api 
     link.appendChild(rImg); // append image to link 
     resultD.appendChild(link); // append link with image to div 
     resultD.innerHTML += data.artObjects[artObj].title; // this is the title from rijks api 
     $("#result img").each(function (i, image){ //for each image create a different id 
     image.id = "image" + (i + 1); 
     }); 
    $("#result a").each(function (i, anchor){ //for each anchor create a different id 
     anchor.id = "anchor" + (i + 1); 
     anchor.setAttribute('onclick', "anchor" + (i + 1)+'();return false;'); // set link path 
     //return false needed so to avoid page jump 
     }); 
    resultD.innerHTML += "<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>"; 
    } 
}); 
} 
}//search function ends here 



//for each image create size matching canvas 
function anchor1(){ 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image1"); 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
setTimeout(function() { //timeout for image load to canvas - start 
    var colorThief = new ColorThief(); 
    var color = colorThief.getPalette(img, 18); 
    var newHTML = $.map(color, function(value) { 
    return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;</div>'+'<br>'); 
    }); 
    $("#colors").html(newHTML.join('')); 
}, 500); //timeout for image load to canvas - ends 
} 

function anchor2(){ 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image2"); 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
    setTimeout(function() { //timeout for image load to canvas - start 
    var colorThief = new ColorThief(); 
    var color = colorThief.getPalette(img, 18); 
    var newHTML = $.map(color, function(value) { 
     return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;</div>'+'<br>'); 
    }); 
    $("#colors").html(newHTML.join('')); 
}, 500); //timeout for image load to canvas - ends 
} 

function anchor3(){ 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image3"); 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
    setTimeout(function() { //timeout for image load to canvas - start 
    var colorThief = new ColorThief(); 
    var color = colorThief.getPalette(img, 18); 
    var newHTML = $.map(color, function(value) { 
     return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;</div>'+'<br>'); 
    }); 
    $("#colors").html(newHTML.join('')); 
}, 500); //timeout for image load to canvas - ends 
} 

function anchor4(){ 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image4"); 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
    setTimeout(function() { //timeout for image load to canvas - start 
    var colorThief = new ColorThief(); 
    var color = colorThief.getPalette(img, 18); 
    var newHTML = $.map(color, function(value) { 
     return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;</div>'+'<br>'); 
    }); 
    $("#colors").html(newHTML.join('')); 
}, 500); //timeout for image load to canvas - ends 
} 

function anchor5(){ 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image5"); 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
    setTimeout(function() { //timeout for image load to canvas - start 
    var colorThief = new ColorThief(); 
    var color = colorThief.getPalette(img, 18); 
    var newHTML = $.map(color, function(value) { 
     return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;</div>'+'<br>'); 
    }); 
    $("#colors").html(newHTML.join('')); 
}, 500); //timeout for image load to canvas - ends 
} 

Answer 1

Вы хотите использовать .on событие с JQuery, который позволяет вам иметь дело с динамическими данными, которые в основном то, что вы имеете дело с.

Вы генерируя различные <a> связи с индивидуальным id назвать свои различные функции, такие как (anchor1, anchor2 ...) с $("#result a").each(function (i, anchor){ //for each anchor create a different id anchor.id = "anchor" + (i + 1);

Вместо того чтобы генерировать другой идентификатор для каждого <a> просто дать им такое же значение, но сделать его классом, а не идентификатором. Идентификатор должен всегда быть уникальным и никогда не повторяться, классы могут повторяться. Например, <a class="anchor"><...</a>

Затем, когда вы хотите иметь дело с данными из этой конкретной записи/изображения, вы могли бы назвать это таковым.

$(document).on('click','.anchor', function() { 

}); 

Итак, вот рабочий пример, на котором вы можете начать.

<a class="anchor" data-id="1">...</a> 


$(document).on('click','.anchor', function() { 
    var anchor_id = $(this).attr('data-id').val(); 

    var c=document.getElementById("drawing1"); 
    var ctx=c.getContext("2d"); 
    var img=document.getElementById("image"+anchor_id); //this will attach the id for that image here 
    c.height = img.height ; 
    c.width = img.width ; 
    ctx.drawImage(img,0,0,c.width, c.height); 
    $("#result").hide(); 
    setTimeout(function() { //timeout for image load to canvas - start 
     var colorThief = new ColorThief(); 
     var color = colorThief.getPalette(img, 18); 
     var newHTML = $.map(color, function(value) { 
     return('<div style="background-color:rgb(' + value.join(', ') + ')">&nbsp;  </div>'+'<br>'); 
     }); 
     $("#colors").html(newHTML.join('')); 
    }, 500); //timeout for image load to canvas - ends 
}); 

http://api.jquery.com/on/

https://learn.jquery.com/events/handling-events/

http://html-tuts.com/jquery-this-selector/