Одна функция JavaScript из нескольких кнопок HTML

Question

Странный вопрос, но у меня есть функция JavaScript, которая рисует на холсте.Я создал кнопки на HTML, который использует эту функцию.У меня есть несколько кнопок с разными источниками изображений, которые я хочу использовать для этой функции, не повторяя ее много раз и просто меняя imgsrc.Я попытался дать идентификаторы кнопки, но у вас не должно быть нескольких идентификаторов.Я пытался использовать классы, но это не сработало.Использование AngularJS.

HTML

<md-button onclick="(new avatarCanvas()).body()" style="border: 3px solid black;"><input class="image" value="www.website.com/image1.png" type="hidden"></md-button>

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image2.png" type="hidden"></md-button> 

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image3.png" type="hidden"></md-button>

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image4.png" type="hidden"></md-button>

<md-button onclick="(new avatarCanvas()).hair()" style="border: 3px solid black;"><input class="hair" value="www.website.com/image5.png" type="hidden"></md-button>

JavaScript

var canvas1 = document.getElementById('layer1');
var ctx1 = canvas1.getContext('2d');

var canvas2 = document.getElementById('layer2');
var ctx2 = canvas2.getContext('2d');

var imageObj = new Image();

this.body = function() { 
imageObj.onload = function() {
  ctx1.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
};
imageObj.src = document.getElementsByClassName("image").value;
}

this.hair = function() {
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
imageObj.onload = function() {
  ctx2.drawImage(imageObj, 64.43, 7, imageObj.width, imageObj.height);
 };
imageObj.src = document.getElementsByClassName("hair").value;
}

Answer 1

Я бы предложил вам создать пользовательскую директиву для кнопки, чтобы обрабатывать событие нажатия, поскольку это повторяющаяся задача.И вы можете добавить пользовательские атрибуты, такие как «data-img-path», вместо этого используя скрытую переменную для передачи пути к изображению.

Например:

<md-button data-load-avatar style="border: 3px solid black;" data-image-path="www.website.com/image1.png"  />

здесь «data-load-avatar»пользовательская директива, в которую вы можете добавить событие click, прочитать атрибут «data-image-path» и использовать этот путь к изображению при загрузке на холст.Таким образом, ваш код также будет чистым и поддерживаемым.