使用JavaScript下载图像

我正在编写JavaScript代码来上传、预览和下载图像。目前我已经做了上传和预览代码。之后，如何下载呢

    <section class="upload" id="upload">
            <h3>UPLOAD</h3>
          
          <div class="container">
            <div class="row">
              
              <canvas id="c" class="p-3" >Here's the canvas.</canvas>
              <br>
              <input type="file" id="infile" accept = "image/*" onchange="handleFiles(this.files)">
              <p><img id="output" /></p>
              <button onclick="blurimg()" class="btnbl">Blur Image</button>
              <br>
             </div>
            </div>
      
    </section>

---

未经测试，但符合以下要求：

异步函数下载画布（）{
常量类型='image/jpeg'
常数质量=1
constblob=wait new Promise（rs=>canvas.toBlob（rs，type，quality）
const link=document.createElement（'a'）
a、 href=URL.createObjectURL（blob）
a、 下载='cat.jpg'
a、 单击（）
}

---

如果您想要并支持更新的浏览器，则可以使用而不是绘制

您可以在

HTML

中执行此操作检查此示例：

     //Canvas creating with image
        document.getElementById('infile').onchange = function(e) {
          var img = new Image();
          img.onload = draw;
          img.onerror = failed;
          img.src = URL.createObjectURL(this.files[0]);
        };
        function draw() {
          var canvas = document.getElementById('c');
          canvas.width = this.width;
          canvas.height = this.height;
          var ctx = canvas.getContext('2d');
          ctx.drawImage(this, 0,0);
        }
        function failed() {
          console.error("The provided file couldn't be loaded as an Image media");
        }