왜 FileSaver 다른 이름으로 작동하지 않을 것으로 JSZip?

0

질문

첫 번째 시간을 게시,이것은 전체 코드(그것의 대부분을 발견했 온라인 과정 중 일부는 것을 봉사하는 내용),하지만 더 구체적으로 말하면 내 오류가 끝이 어디입니다.

Catch 되지 않는 형식 오류:을 실행하지 못했'createObjectURL'on'URL':과부하를 확인하지 못했습니다.

때 나는 단순히 사용하는 다른 이름으로(img_url,"img.png"),를 저장하는 옵션 노트북 나타납니다. 그러나 나는 오류가 위에서 언급하려고 할 때 사용하는"컨텐츠". 가 filesaver 및 jszip 스크립트에서,나는 그냥을 찾을 수 없습니다 문제를 해결하기 위해 어떤 방법을 오류가는 그 실행을 멈추고 더 아무것도. 죄송 지저분한 코드는 것이 정말로 도와 주셔서 감사합니다.

주요 부분은 아래쪽에,나머지는 그냥 넣는 사람을 원할 수 있습니다. Theres url blob 다음 캔버스에 발전기,저는 단지 이유를 모르겠지 않을 저장합니다.

!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

최고의 응답

1

zip.gzip.generateAsync() returns a Promise. 이 약속이 해결 Blob,나중에 몇 번 있지만,그것은 약속되지 않 합니다.
그래서 당신은 필요가 기다리고해상도의 이 약속에 액세스 생성 합니다.

표시할 수 있습니다 당신의 기능으로 async 다음 사용 await 키워드:

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

또는 포장은 다른 이름으로 부분에서 콜백을 전달하는 약속의 .then():

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

지금,당신이 선택하든,당신의 zip 파일이 실제로 비어 있습니다. 내용을 추가에서만 콜백의 setTimeout즉,이러한 내용이 추가될만한 후에 당신을 만들은 zip 파일이 너무 늦습니다.
그래서 제거 setTimeout( 일부는 쓸모없는 것 같다고 실행하는 그것의 콜백의 콘텐츠에 직접 있습니다.

2021-11-21 23:32:28

사용했다 setTimeout 를 추가할 때 지연을 시각적으로 보는 그 변경을 통해 임의의 색상은 HTML 페이지에. 나는 것도 있지만,어떻게 지 것 빈? 그러나 내가 생각기 때문에 나는 그를 초기화 지퍼로 버튼을 클릭하면 다음 내에서 루프를 추가하는 파일을 압축하 folder?
absolutenoob

Wow,이 일,대단히 감사합니다. 할 수 있다면,당신은 어쩌면 이유를 설명해 특별히는 문제입니까?
absolutenoob

문제를 일으키는"catch 되지 않는 형식 오류:을 실행하지 못했'createObjectURL'on'URL':과부하를 확인하지 못했습니다."이었다는 전달되는 약속을 대신 개체 Blob. 에 대한 빈 zip 기 때문에 그것이 setTimeout(fn) 이 지연 fn 몇 시간 이상(경우에도 시간 제한 0). 그래서 이 콜백 fn 라,라인을 아래에 이미 실행되었다. 그리고 이후에선 아래에 당신을 마무리 지퍼 파일,이 zip 파일이 생성되기 전에 당신이 추가되는 모든 파일을.e 빈입니다.
Kaiido

오,그래서 setTimeout(fn)밀어 fn 를 실행하나요? 흥미로운 다음,어떻게 만들기 위해 루프가 있는 지연 사이에 각 반복지만,또한 연기 호출 수 있을까요?
absolutenoob

약속을 사용할 수 있습에서 봐야 stackoverflow.com/questions/14220321/...
Kaiido

다른 언어로

이 페이지는 다른 언어로되어 있습니다

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