Ce clase filesaver saveAs nu va lucra cu un JSZip?

0

Problema

Prima dată când a posta, asta este tot codul (majoritatea l-am găsit online și optimizat unele lucruri pentru a-mi servi scopul), dar, mai precis, eroarea mea este spre final unde am ajunge.

Neprins TypeError: nu a Reușit să executăm createObjectURL' pe 'URL': Suprasarcină rezoluție nu a reușit.

Când am folosi pur și simplu saveAs(img_url, "img.png"), opțiunea de a salva pe laptop apare. Dar primesc eroarea am menționat mai sus, atunci când încercarea de a utiliza "conținut". Am clase filesaver și jszip în script-ul, eu doar nu pot par să găsească vreo modalitate de a repara o eroare, care apoi se oprește de executare nimic mai mult. Îmi pare rău pentru mizerie de cod, ar aprecia cu adevărat de ajutor.

Partea principală este spre partea de jos, restul e doar în cazul în care cineva ar vrea să vadă. E url-ul pentru a blob apoi panza generator, nu știu de ce nu te va salva.

!function() {
    function dataURLtoBlob(dataURL, type) {
      var binary = atob(dataURL.split(',')[1]),
          length = binary.length,
          binaryArray = new Uint8Array(length);
      for (var i = 0; i < length; i++) {
        binaryArray[i] = binary.charCodeAt(i);
      }
      return new Blob([binaryArray], {type: type});
    }

    var SolidImage = function() {
      var canvas = document.createElement('canvas'),
          ctx = canvas.getContext('2d');
      this.img = new Image();
      this.make = function(color) {
        canvas.width = 500;
        canvas.height = 500;
        
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#FFFFFF";
        ctx.textAlign = "center";
        ctx.font = "bold 50px Courier New";
        ctx.fillText(color.substring(3), 250, 250);
        var dataURL = canvas.toDataURL('image/png')
        this.img.src = dataURL;
        if (this.blobURL) URL.revokeObjectURL(this.blobURL);
        this.blob = dataURLtoBlob(dataURL, 'image/png');
        this.blobURL = URL.createObjectURL(this.blob);
      }
    };
    
    var solidImage = new SolidImage(),
        button = document.getElementById('make'),
        result = document.getElementById('result'),
        link = document.createElement('a');
    
    link.setAttribute('target', '_blank');
    result.appendChild(solidImage.img);
    result.insertAdjacentHTML('beforeend', 'Save this image or<br>');
    result.appendChild(link);
    solidImage.img.width = 600;
  
    
    button.addEventListener('click', function(){
        var zip = new JSZip();
        console.log("after zip");
        //var img = zip.folder("rdm_imgs");
        //////////////////////////////////
        for (var i = 0; i < 1; i++) {
            setTimeout(function() {
        var rgb_r = Math.floor(Math.random() * (256+1)),
            rgb_g = Math.floor(Math.random() * (256+1)),
            rgb_b = Math.floor(Math.random() * (256+1)),
            random_color = "rgb(" + rgb_r + ", " + rgb_b + ", " + rgb_g + ")";
      var filename = random_color.replace(/\s/g, "") + '.png';
      solidImage.make(random_color);
      link.innerHTML = 'Download content ' + filename;
      var img_url = solidImage.blob;
      //console.log(img_url.replace(/^data:image\/(png|jpg);base64,/, ""));
      console.log(img_url);
      //link.setAttribute('href', img_url);
      //link.setAttribute('download', filename);
      result.className = 'generated';

      zip.file(filename, img_url);
            },i * 500)}
        console.log("after loop");
        var content = zip.generateAsync({type:"blob"});
        console.log("after zip generate");
        saveAs(content, "imgs.zip");
        console.log("after saveAs");
        //link.innerHTML = 'Download Contents.zip';
        //var img_url = solidImage.blobURL;
        //link.setAttribute('href', content);
        //link.setAttribute('download', "content.zip");
    });
  }();
blob filesaver.js javascript jszip
2021-11-21 21:48:48
1

Cel mai bun răspuns

1

zip.gzip.generateAsync() returnează o Promisiune. Această Promisiune se va rezolva cu o Pată de cerneală, de câteva ori mai târziu, dar e o Promisiune, nu o Pată de cerneală.
Deci, ai nevoie să aștepte rezoluția de această Promisiune pentru a accesa generate Blob.

Puteți fie marca ta funcționa ca async și de a folosi apoi await cuvinte cheie:

button.addEventListener('click', async function(){
  // ...
  var content = await zip.generateAsync({type:"blob"});

Sau înfășurați saveAs parte la un callback trecut la Promisiunea lui .then():

zip.generateAsync({type:"blob"}).then(function(content) {
  console.log("after zip generate");
  saveAs(content, "imgs.zip");
})

Acum, orice ai alege, fișierul zip va fi de fapt gol. Adăugați conținut la ea doar în apelul de setTimeout, ceea ce înseamnă că acest conținut vor fi adăugate numai după ce ai făcut crea fișierul zip, care este prea târziu.
Deci, scoateți setTimeout( partea care pare inutil si executa sale de apel invers de conținut direct.

2021-11-21 23:32:28

Am folosit setTimeout pentru a adăuga o întârziere atunci când vedea vizual se schimba prin culori aleatorii pe pagina HTML. Am să încerc, deși cum zip ar fi gol? Dar presupun că de când am inițializa zip de indata ce butonul este apasat, apoi în buclă sunt adăugarea de fișiere într-un folder zip?
absolutenoob

Wow, aceasta a lucrat, vă mulțumesc foarte mult. Dacă ai putea, ai putea explica de ce exact care a fost problema?
absolutenoob

Problema care cauzează "Neprins TypeError: nu a Reușit să executăm createObjectURL' pe 'URL': Suprasarcină rezoluție nu a reușit." a fost că a trecut o Promisiune obiect în loc de o Pată de cerneală. Pentru gol zip pentru că setTimeout(fn) va întârzia fn pentru unele timp mai târziu (chiar dacă timeout este 0). Deci, atunci când acest apel invers fn este numit, randurile de mai jos va fi fost deja executat. Și deoarece, în rândurile de mai jos veți face finaliza fișier zip, acest fișier zip este creat înainte de a și-a adăugat niciun fișier care să-l am.e e gol.
Kaiido

oh, deci setTimeout(fn) împinge fn pentru a executa ultima? Interesant, de ce as face-o pentru buclă, care are o întârziere între fiecare iterație, dar, de asemenea, nu amâna apeluri până la capăt?
absolutenoob

Folosirea de Promisiuni, puteți avea o privire la stackoverflow.com/questions/14220321/...
Kaiido

În alte limbi

Această pagină este în alte limbi

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................