Как загружать, переименовывать и сохранять изображения, созданные с помощью пользовательского ввода

ProgramBox

Как загружать, переименовывать и сохранять изображения, созданные с помощью пользовательского ввода

Post author:admin
Запись опубликована:1 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #jszip

#javascript #jquery #HTML #jszip

Вопрос:

Я создаю веб-приложение, в котором пользователь будет вводить старое имя файла и новое имя файла, и он сможет загружать созданные файлы.

Я новичок в программировании, особенно в 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-адресов, как в моем примере.

Ответ №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);
         });
       }
      });
  });
}

1. Хорошо, это выглядит многообещающе (даже я на самом деле мало что понимаю) … не могли бы вы сказать мне, куда следует поместить этот код? и как подключить его к полю ввода старого имени и нового имени? Извините, если прошу слишком многого.

Ответ №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>

1. Привет! похоже, вы на самом деле не поняли мой вопрос: ( вы все еще используете предопределенные URL-адреса… ваш ввод не работает: (он по-прежнему загружает изображения, которые вы указали в var urls вместо того, чтобы создавать URL-адреса из входных данных, что-то вроде: основной URL всегда: www.example.com/images / код ввода 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg 6.jpg, 7.jpg Надеюсь, теперь это имеет смысл. Вы очень близки! Также было бы неплохо иметь возможность использовать несколько входных данных, а не только один, если это также имеет смысл? Спасибо!

2. как вы описываете, я думаю, что мой новый ответ вас удовлетворит. Теперь вам нужно указать имя файла, номер URL, который будет сгенерирован, и расширение файла. ИЛИ, если вы можете ввести массив имен файлов, НАПРИМЕР: [‘AMSPP-BL-1.jpg ‘,’AMSPP-BL-2.jpg ‘,’AMSPP-BL-3.jpg ‘,’AMSPP-BL-4.jpg ‘], это также может быть решением, если хотите этот тип, тогда напишите мне. Спасибо….

3. Ваш реальный код соответствует 50% моих ожиданий! Во-первых, нам не нужно это поле формата файла, файлы всегда будут .jpg. Второе — количество изображений, как я написал в основном ответе, будет варьироваться от 1 до 7, поэтому, пожалуйста, проверьте все 7 файлов в Интернете, чтобы получить хороший ответ 200, и загрузите все доступные изображения. В-третьих, небольшая проблема с вашим кодом, он загружает изображения, но порядок неправильный. Например, изображение под номером 1 на веб-сайте становится номером 2 при загрузке, знаете почему? И последнее, но действительно важное, мы по-прежнему не переименовываем файлы: ( Посмотрите на мою картинку, попытайтесь понять!