从单个页面保存/下载多个画布

Question

我想在单个页面上下载HTML2Canvas创建的多个Canvas，单击1点。下载1帆布工作正常。

我试图在函数sendtocanvas中创建一个循环，遍历每个ID（我知道我要发送到canvas的每个HTML元素的ID，然后下载），但是它没有期望的结果。

我期望将4个文件下载为JPEG，每个文件都命名为file_1，file_2，file_3和file_4，

我假设在函数中只循环每个ID并不是要走的方法。我没有编写我试图适应我的需求的原始代码

var button = document.getElementById('download');
button.addEventListener('click', sendToCanvas);

function download( canvas, filename ) {
    // create an "off-screen" anchor tag
    const a = document.createElement('a');

    // the key here is to set the download attribute of the a tag
    a.download = filename;

    // convert canvas content to data-uri for link. When download
    // attribute is set the content pointed to by link will be
    // pushed as "download" in HTML5 capable browsers
    a.href = canvas.toDataURL("image/jpeg;base64, 0.5");

    a.style.display = 'none';
    document.body.appendChild( a );
    a.click();
    document.body.removeChild( a );
}


function sendToCanvas(event){

var toCanvas = ["#redBlock", "#blueBlock", "#greenBlock", "#yellowBlock"]


for (let i = 0; i < toCanvas.length; i++) {
  const element = document.querySelector(toCanvas[i]);
  
  html2canvas(element, {
    scale: 1,
    useCORS: true,
  })
    .then( ( canvas ) => {
    download( canvas, 'file_' + (i + 1) );
  });
 }
}

#redBlock {
width:100px;
height:100px;
background-color:red;
}

#blueBlock {
width:100px;
height:100px;
background-color:blue;
}

#greenBlock {
width:100px;
height:100px;
background-color:green;
}

#yellowBlock {
width:100px;
height:100px;
background-color:yellow;
}

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<button id="download">Download</button>

<section id="redBlock">
</section>

<section id="blueBlock">
</section>

<section id="greenBlock">
</section>

<section id="yellowBlock">
</section>

Answer 1

您可以使用async进行循环，然后也许在您的下载功能中，您可以将所有块都放在带有jszip的库中的zip文件中

let canvasArr = [];
var zip = new JSZip();
async function download(){
    for (const canvas of canvasArr) {
      index++;
      var data = canvas;
      var idx = data.indexOf('base64,') + 'base64,'.length;
      var content = data.substring(idx);
      zip.file('myFile' + index + '.extension', content, { base64: true });
   }
   zip.generateAsync({ type: 'blob' }).then((data: any) => {
      saveAs(data, `downloadFile.zip`);
   });
}

async function sendToCanvas(event){
      var toCanvas = ["#redBlock", "#blueBlock", "#greenBlock", "#yellowBlock"]
      for await (let i = 0; i < toCanvas.length; i++) {
        const element = document.querySelector(toCanvas[i]);
        const canvas = await html2canvas(element, {
          scale: 1,
          useCORS: true,
        });
       canvasArr.push(canvas);
     }
     await download();
}

但是，我认为这不是解决此问题的最佳方法。

： https://github.com/github.com/niklasvh/niklasvh/html2canvas/sissues/1414141413

请参阅 - ＆gt; https://stuk.github.io/jszip/

等待... https> https：https：// devaxinger。 mozilla.org/en-us/docs/web/javascript/reference/statement/for-await...of