如何从 dataURL 创建图像文件并保存？答案

【问题标题】：How to create an Image file from dataURL and save it?如何从 dataURL 创建图像文件并保存？
【发布时间】：2020-10-24 21:31:36
【问题描述】：

我找到了一种将其另存为 PDF 的方法，但现在我需要将其另存为图像。

这是我的代码：

function downloadCert() 
    {
        html2canvas($('#canvas'), {
            
          onrendered: function(canvas) {

            var imgData = canvas.toDataURL("image/jpeg");
            console.log(imgData);
            var pdf = new jsPDF();
            pdf.addImage(imgData, 'JPEG', 0, 0, -180, -180);
            pdf.save("download.pdf");
           }
         });

    }

【问题讨论】：

标签： javascript image file save

【解决方案1】：

const downloadFile = () => {
  const imgUri = 'data:image/gif;base64,R0lGODlhPQBEA....' //Image base64 uri
  const link = document.createElement('a')
  document.body.appendChild(link)

  link.href = imgUri
  link.target = '_self'
  link.fileName = 'test_file_download.gif'
  link.download = true
  link.click()
}

base64 字符串中的格式和文件扩展名应该匹配才能正确打开文件。在上述情况下，它是gif

【讨论】：

【解决方案2】：

使用这个：

function blobCallback(fileName) {
    return function(b) {
      var a = document.createElement('a');
      a.download = fileName+ '.jpeg';
      a.href = window.URL.createObjectURL(b);
      a.click();
  }
}

$('#canvas').toBlob(blobCallback('DownloadFileName'), 'image/jpeg');

【讨论】：