html - Javascript Canvas Download Clashing - Stack Overflow

admin管理员组

文章数量:1302328

I'm working on a way to download two different sized versions of the picture using a canvas to repeat an image in its background.

It works when i tested just a single download option, but it doesn't allow me to use more than one despite unique identifiers. Can you help me out? Below is the JavaScript code & notes.

Notes:

• The canvas and download buttons are hidden within a toggle (div display: block/none). It worked for the first test, but not after adding different versions.
• The body tag uses onload="loadMe1();loadMe2()"; since they're temporarily hidden by a <div>
• The JavaScript is within the body of the HTML5 code

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

I'm working on a way to download two different sized versions of the picture using a canvas to repeat an image in its background.

It works when i tested just a single download option, but it doesn't allow me to use more than one despite unique identifiers. Can you help me out? Below is the JavaScript code & notes.

Notes:

• The canvas and download buttons are hidden within a toggle (div display: block/none). It worked for the first test, but not after adding different versions.
• The body tag uses onload="loadMe1();loadMe2()"; since they're temporarily hidden by a <div>
• The JavaScript is within the body of the HTML5 code

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

• javascript
• html
• image
• download
• html5-canvas

Share Follow edited Feb 11 at 2:50 Lã Ngọc Hải 66911 gold badge99 silver badges2424 bronze badges asked Feb 11 at 0:15 A JonesA Jones 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The main problem is that you try to create a1 and a2 tags, which are not valid tags. For anchor elements, you need to create a tags.

See my EDIT Comments for specific edits.

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'));
  // EDIT an anchor tag is a, not a1
  // var anchor1 = document.createElement('a1');
  var anchor1 = document.createElement('a');

  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'));
  // EDIT an anchor tag is a, not a2
  // var anchor2 = document.createElement('a2');
  var anchor2 = document.createElement('a');

  console.log(anchor2);
  anchor2.setAttribute('href', image2.src);
  anchor2.setAttribute('download', 'image2.png');
  anchor2.click();
}

canvas {
  border: 1px solid #aaa;
  box-shadow: 2px 2px 4px black;
}

<body onload="loadMe1();loadMe2()">

  <img src="https://placebear/16/16.jpg" id="lamp">

  <button onclick="dwn1()">Down 1</button>
  <button onclick="dwn2()">Down 2</button>

  <hr>

  <canvas id="largePicPreview1" width="200" height="150"></canvas>
  <canvas id="largePicPreview2" width="200" height="150"></canvas>


</body>

本文标签： htmlJavascript Canvas Download ClashingStack Overflow