javascript画布下载clashing

Question

画布和下载按钮隐藏在切换中（div Display：块/无）。它适用于第一个测试，但在添加后不适用不同版本

车身标签使用onload =“ loadme1（）; loadme2（）”;因为他们暂时隐藏

javaScript在HTML5代码
的主体内
函数loadme2（）{ const canvas2 = document.getElementById（'grounpicpReview2'）; const ctx2 = canvas2.getContext（'2d'）; const img2 = document.getElementById（'lamp'）; const pat2 = ctx2.createpattern（img2，'repot'）; ctx2.Rect（0，0，150，150）; ctx2.fillstyle = pat2; ctx2.fill（）; 返回canvas2; } 函数convertcanvastoimage2（canvas2）{ var image2 = new Image（）; image2.src = canvas2.todataurl（'image/png'）; 返回image2; } //一个按钮使用“ onClick =” dwn2（）” 功能dwn2（）{ var image2 = convertcanvastoimage2（document.getElementById（'grounpicpReview2'））; var anchor2 = document.createelement（'a2'）; console.log（Anchor2）; Anchor2.setAttribute（'Href'，Image2.SRC）; Anchor2.setAttribute（'download'，'image2.png'）; Anchor2.Click（）; }
主要问题是您尝试创建不是有效标签的
a1
和
a2

a

Answer 1

请查看我的特定编辑评论。

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.com/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>

javascript画布下载clashing

问题描述投票：0回答：1

1个回答

最新问题

javascript画布下载clashing

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1