JavaScript Canvas скачать столкновение ⇐ Html

[Anonymous]

Я работаю над тем, чтобы загрузить две разные версии изображения, используя Canvas, чтобы повторить изображение на своем фоне. Вариант, но это не позволяет мне использовать более одного, несмотря на уникальные идентификаторы. Вы можете мне помочь? Ниже приведены код и примечания JavaScript. Div Display:
block /none). Он работал для первого теста, но не после добавления
разных версий. Они
временно скрыты с помощью
[*] JavaScript находится в корпусе кода HTML5

function loadMe1() {
const canvas1 = document.getElementById('largePicPreview1');
const ctx1 = canvas1.getContext('2d');
const img1 = document.getElementById('lamp');
const pat1 = ctx1.createPattern(img1, 'repeat');
ctx1.rect(0, 0, 50, 50);
ctx1.fillStyle = pat1;
ctx1.fill();
return canvas1;
}
function convertCanvasToImage1(canvas1) {
var image1 = new Image();
image1.src = canvas1.toDataURL('image/png');
return image1;
}
// a button uses "onclick="dwn1()"
function dwn1() {
var image1 = convertCanvasToImage1(document.getElementById('largePicPreview1'));
var anchor1 = document.createElement('a1');
console.log(anchor1);
anchor1.setAttribute('href', image1.src);
anchor1.setAttribute('download', 'image1.png');
anchor1.click();
}
function loadMe2() {
const canvas2 = document.getElementById('largePicPreview2');
const ctx2 = canvas2.getContext('2d');
const img2 = document.getElementById('lamp');
const pat2 = ctx2.createPattern(img2, 'repeat');
ctx2.rect(0, 0, 150, 150);
ctx2.fillStyle = pat2;
ctx2.fill();
return canvas2;
}
function convertCanvasToImage2(canvas2) {
var image2 = new Image();
image2.src = canvas2.toDataURL('image/png');
return image2;
}
// a button uses "onclick="dwn2()"
function dwn2() {
var image2 = convertCanvasToImage2(document.getElementById('largePicPreview2'));
var anchor2 = document.createElement('a2');
console.log(anchor2);
anchor2.setAttribute('href', image2.src);
anchor2.setAttribute('download', 'image2.png');
anchor2.click();
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... d-clashing