如何下载、重命名和保存用户输入生成的图像答案

【问题标题】：How to download, rename and save images generated by user input如何下载、重命名和保存用户输入生成的图像
【发布时间】：2019-03-27 17:22:51
【问题描述】：

我正在构建一个网络应用程序，用户将在其中输入旧文件名和新文件名，他将能够下载生成的文件。

我是编码新手，特别是 Javascript，所以我决定请你们看看，也许可以帮助我找到解决方案。

我尝试使用 Jszip，但不知道如何配置它以获取用户的输入而不是预定义的 url。

<html>
<head>
</head>
<body>    
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js"></script>   
<script>
var urls = [
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-1.jpg", 
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-2.jpg",
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-3.jpg",
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-4.jpg",
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-5.jpg",
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-6.jpg",
                 "https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/AMSPP-BL-7.jpg"];
var nombre = $scope.meetingName;
//The function is called
compressed_img(urls,nombre);

function compressed_img(urls,nombre) {
  var zip = new JSZip();
  var count = 0;
  var name = nombre+".zip";
  urls.forEach(function(url){
    JSZipUtils.getBinaryContent(url, function (err, data) {
      if(err) {
         throw err; 
      }
       var filename = url.replace(/.*\//g, "");
       zip.file(filename, data, { binary: true, createFolders: true });
       count++;
       if (count == urls.length) {
         zip.generateAsync({type:'blob'}).then(function(content) {
            saveAs(content, name);
         });
       }
      });
  });
}
</script>    
<br/>
<br/>
<center>
Click the button to generate a ZIP file
<br/>
<input id="button" type="button" onclick="compressed_img(urls,nombre)" value="Create Zip"></input>
</center>    
</body>    
</html>

我希望下载和重命名用户指定的文件，而不是像我的示例那样预定义的 url。

【问题讨论】：

标签： javascript jquery html jszip

【解决方案1】：

function compressed_img(urls,nombre) {
  var zip = new JSZip();
  var count = 0;
  var name = `${nombre}.zip`;
  var givenName = `test`;
  var counter = 1;
  urls.forEach(function(url){
    JSZipUtils.getBinaryContent(url, function (err, data) {

      console.log(data)
      if(err) {
         throw err; 
      }
       var extention = url.split('.').pop();
       zip.file(`${givenName}${counter}.${extention}`, data, { binary: true, createFolders: true });
       count++;
       counter++;
       if (count == urls.length) {
         zip.generateAsync({type:'blob'}).then(function(content) {
            saveAs(content, name);
         });
       }
      });
  });
}

【讨论】：

好吧，这看起来很有希望（即使我不太了解）...你介意告诉我这段代码应该去哪里吗？以及如何将其连接到旧名称和新名称输入框？对不起，如果要求太多。

【解决方案2】：

<html>
<head>
</head>
<body>    
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js"></script>   
<script>


function compressed_img() {
  let name = document.getElementById('nm').value;
  let num = document.getElementById('num').value;
  let ext = document.getElementById('ext').value;
  var urls = new Array();

  for(let i = 1; i <= num; i++){
    urls.push(`https://cors-anywhere.herokuapp.com/https://img.tenniswarehouse-europe.com/new_big/${name}-${i}.${ext}`)
  }
  if(!name){
      alert("please provide the name first.")
      return false;
  }

  var zip = new JSZip();
  var count = 0;
  var nameZip = `${name}.zip`;
  var givenName = name;
  var counter = 1;
  urls.forEach(function(url){
    JSZipUtils.getBinaryContent(url, function (err, data) {

      console.log(data)
      if(err) {
         throw err; 
      }
       var extention = url.split('.').pop();
       zip.file(`${givenName}${counter}.${extention}`, data, { binary: true, createFolders: true });
       count++;
       counter++;
       if (count == urls.length) {
         zip.generateAsync({type:'blob'}).then(function(content) {
            saveAs(content, name);
         });
       }
      });
  });
}
</script>    
<br/>
<br/>
<center>
Click the button to generate a ZIP file
<br/>
Name To be Downloaded : <input type="text" id='nm' placeholder="AMSPP-BL">
Number Of Files : <input type="number" id='num' placeholder="7">
Files extension : <input type="text" id='ext' placeholder="jpg">

<input id="button" type="button" onclick="compressed_img()" value="Create Zip"></input>
</center>    
</body>    
</html>

【讨论】：

嘿！看起来你并没有真正理解我的问题:(你仍然使用预定义的网址......你的输入不起作用:(它仍然下载你在var urls下指定的图像，而不是从输入的东西中构建网址like : main url is always : www.example.com/images/ + 输入代码 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg 6.jpg, 7.jpg 希望现在有意义。你非常接近！如果能够有多个输入，而不仅仅是一个输入，那也很好吗？谢谢！
正如你所描述的，我认为我的新答案会让你满意。现在您必须提供文件名、要生成的 URL 编号和文件扩展名。或者，如果您可以输入文件名 LIKE 的数组：['AMSPP-BL-1.jpg','AMSPP-BL-2.jpg','AMSPP-BL-3.jpg','AMSPP-BL-4。 jpg']，它也可以是一个解决方案，如果想要这种类型然后ping我。谢谢....
您的实际代码符合我预期的 50%！首先，我们不需要那个文件格式字段，文件总是.jpg。第二 - 我在主要答案中写的图片数量从 1 到 7 不等，因此请检查网络上的所有 7 个文件以获得良好的 200 响应并下载所有可用的图像。第三，您的代码有小问题，它会下载图像但顺序不正确。比如网站上的1号图片下载后变成了2号，你知道为什么吗？最后但非常重要的是，我们仍然不重命名文件:(查看我的图片尝试理解！