Сохранение изображений с URL-адреса с помощью JSzip

Я использую JSzip для загрузки html div. Внутри div есть изображения (они не закодированы в base64). Есть ли способ использовать JSzip для загрузки файлов с URL-адреса пути к изображению? или они должны быть закодированы base64?

Мой текущий код — это просто базовый демонстрационный код с сайта JSzip (http://stuk.github.io/jszip/ )

    var zip = new JSZip();
    var email = $('.Result').html();
    zip.file("test.html", email);
    var content = zip.generate({type:"blob"});
    // see FileSaver.js
    saveAs(content, "example.zip");

javascript jquery jszip
person Namenone    schedule 29.10.2014    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Вы можете попробовать использовать JSzip-utils, у него есть вызов только для загрузки изображений с URL-адресов. взглянув на пример в документации JSzip, я нашел его очень хорошим. Вы можете найти рабочий пример с кодом здесь.

Это всего лишь часть загрузки, которую я также использую для загрузки изображений из социальных сетей, используя исходные URL-адреса изображений.

function urlToPromise(url) {
return new Promise(function(resolve, reject) {
    JSZipUtils.getBinaryContent(url, function (err, data) {
        if(err) {
            reject(err);
        } else {
            resolve(data);
        }
    });
});
}
var zip = new JSZip();
zip.file(filename, urlToPromise(url), {binary:true});
zip.generateAsync({type:"blob"})
.then(function callback(blob) {

    // see FileSaver.js
    saveAs(blob, "example.zip");
});
person SergejV    schedule 27.02.2018
comment
Ты спас меня! Благодарность! я использую этот код в своем расширении Chrome! - person Redwings; 07.01.2019
comment
По совпадению я также использую это в своем расширении Chrome. Благодарю вас! - person Diego Fortes; 17.11.2020

arrow_upward
1
arrow_downward

Прежде всего вам нужно загрузить все изображения с помощью ajax. если они находятся в одном домене, вам повезло, иначе вам нужен CORS или прокси.

var xhr = new XMLHttpRequest();

xhr.addEventListener('load', function(){
   if (xhr.status == 200){
      //Do something with xhr.response (not responseText), which should be a Blob
   }
});

xhr.open('GET', 'http://target.url');
xhr.responseType = 'blob';
xhr.send(null);

Когда вы получили изображение, вам нужно манипулировать src во всех <img>, либо вы заменяете их на base64, либо ссылаетесь на папку, где вы поместили их в папку с JSZip.

var reader = new FileReader();
reader.onload = function() {
    showout.value = this.result;
};
reader.readAsDataURL(xhr.response);
person Endless    schedule 29.10.2014

arrow_upward
0
arrow_downward

Вот мое решение (адаптировано из здесь) построение в рамках angular (хотя легко применимо к другим подходам к интерфейсу):

  1. ПРИМЕЧАНИЕ: это работает только в том случае, если вы упаковываете ресурсы -- ДАЖЕ ИЗОБРАЖЕНИЯ -- из одного и того же источника или которые обслуживаются с помощью «совместного использования ресурсов из разных источников»: «*»

  2. Убедитесь, что JSZip UMD включен в ваше глобальное пространство имен. В моем случае с angular я сохранил его через npm i -S jszip, а затем скопировал скрипт node_modules/jszip/dist/jszip.js в свою папку src/assets и включил его в массив скриптов angular.json.

  3. Только Angular: чтобы файл определения машинописного текста jszip работал, скопируйте node_modules/jszip/index.d.ts куда-нибудь в src

  4. Загрузите npm i -S file-saver и импортируйте его как модуль ES6 (см. ниже).

  5. Запустите следующую функцию, когда вы хотите, чтобы произошло событие загрузки:

import { saveAs } from 'file-saver';

async downloadData() {

    // Fetch the image and parse the response stream as a blob
    const imageBlob = await fetch('[YOUR CORS IMAGE URL]').then(response => response.blob());

    // create a new file from the blob object
    const imgData = new File([imageBlob], 'filename.jpg');

    // Copy-pasted from JSZip documentation
    var zip = new JSZip();
    zip.file('Hello.txt', 'Hello World\n');
    var img = zip.folder('images');
    img.file('smile.gif', imgData, { base64: true });
    zip.generateAsync({ type: 'blob' }).then(function(content) {
      saveAs(content, 'example.zip');
    });
  }
person Magnus    schedule 11.11.2020