使用 JavaScript 下载图像

Posted

技术标签:

【中文标题】使用 JavaScript 下载图像【英文标题】:Image download using JavaScript 【发布时间】:2021-08-07 14:12:01 【问题描述】:

我正在编写用于上传、预览和下载图像的 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>
     //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");
        

【问题讨论】:

【参考方案1】:

您可以在 html 中执行此操作,请查看此示例:https://www.w3schools.com/tags/att_a_download.asp

【讨论】:

【参考方案2】:

未经测试,但应该是这样的:

async function downloadCanvas () 
  const type = 'image/jpeg'
  const quality = 1
  const blob = await new Promise(rs => canvas.toBlob(rs, type, quality)
  const link = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = 'cat.jpg'
  a.click()

如果您想要并支持更新的浏览器,那么您可以使用bitmap = await createImageBitmap(file) 而不是画&lt;img&gt;

【讨论】:

以上是关于使用 JavaScript 下载图像的主要内容,如果未能解决你的问题,请参考以下文章

iOS webview:提示用户仅使用 JavaScript 下载图像

尝试使用javascript下载网站上的所有图像

从外部 URL 下载图像,使用 JavaScript 和 ExpressJs 保存在服务器上 [重复]

weex开发学习笔记_环境搭建

有啥用?和:[重复]

javascript 通过控制台从页面下载图像