JavaScript Canvas Download Clashing ⇐ HTML

[Guest]

Ich arbeite an einer Möglichkeit, zwei verschiedene Versionen des Bildes mit einer Leinwand herunterzuladen, um ein Bild im Hintergrund zu wiederholen. Option, aber es erlaubt mir nicht, trotz einzigartiger Kennungen mehr als einen zu verwenden. Kannst du mir helfen? Unten finden Sie den JavaScript -Code & Notizen. DIV -Anzeige:
Block /None). Es funktionierte für den ersten Test, jedoch nicht nach dem Hinzufügen
verschiedene Versionen. Sie sind
vorübergehend von einem
Das JavaScript befindet >

Code: Select all

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();
}