Изменение размера изображений с помощью RxJS и узла

Question

Я новичок в RxJS и пробую эту (казалось бы) простую задачу, но я просто не могу понять это.

Я хочу:
1. Прочитайте изображение из файла
2. Преобразовать этот образ на несколько более мелких изображений
3. Сохраните все изображения в файл

Я преобразованный fs.readFile и фс .writeFile для наблюдаемых.

const readFile$ = Rx.Observable.bindNodeCallback(fs.readFile); 
const writeFile$ = Rx.Observable.bindNodeCallback(fs.writeFile); 

Я изготовил трубопровод изображений.

var pictureSizes = [ 
    {width: 100, size: 'thumbnail', suffix: '_t'}, 
    {width: 300, size: 'small', suffix: '_s'}, 
    {width: 600, size: 'medium', suffix: '_m'}, 
    {width: 1000, size: 'large', suffix: '_l'} 
]; 

И я сделал resizeImage $ функцию с использованием графики магии

function resizeImage$(picture, data) { 
    return Rx.Observable.create(observer => { 
     gm(data) 
     .resize(picture.width) 
     .toBuffer('jpg', function(err, buffer) { 
      if (err) { 
      console.log(err); 
      observer.error(err); 
      } else { 
      observer.next(buffer); 
      observer.complete(); 
      } 
     }); 
    }) 
} 

Я думаю (надеюсь) выше нормально. Я не могу понять, как связать своих операторов.

readFile$('./largeimage.jpg') 
    .mergeMap(data => pictureSizes.map(picture => resizeImage$(picture, data))) 
    .flatMap(picture => writeFile$('./testImages/resized.jpg', picture)) 
    .subscribe(
    (x) => console.log('Next', x), 
    (e) => console.log('Error', e), 
    (c) => console.log('Complete',c) 
) 

Это выше поврежденные данные в файл jpeg. (И перезаписывает этот файл, потому что я не могу понять, как получить pictureSizes.suffix во имя выводимого файла.

Все, что помогает! Спасибо.

UPDATE

Я получил его на работу , но я знаю, что эта причудливая множественная подписка - это ужасный анти-шаблон. Основная подписка завершается до изменения размера изображения. У меня такое чувство, что это проблема с горячей/холодной, но я понятия не имею, как это исправить. код ..

const pictureSizes = [ 
    {width: 100, size: 'thumbnail', suffix: '_t'}, 
    {width: 300, size: 'small', suffix: '_s'}, 
    {width: 600, size: 'medium', suffix: '_m'}, 
    {width: 1000, size: 'large', suffix: '_l'} 
]; 

const image = 'truck.jpg'; 

function resizeImage$(binary, pictureSize) { 
    return new Rx.Observable(observer => { 
     gm(binary) 
     .resize(pictureSize.width) 
     .toBuffer('jpg', function(err, buffer) { 
      console.log('BUFFER'); 
      if (err) { 
      console.log(err); 
      observer.error(err); 
      } else { 
      observer.next({binary: buffer, pictureSize: pictureSize}); 
      observer.complete('done'); 
      } 
     }); 
    }).subscribe(
    (resizedImage) => { 
     console.log(resizedImage); 
     const binary = resizedImage.binary; 
     const pictureSize = resizedImage.pictureSize; 
     const fileName = image.split('.')[0]; 
     const fileExtension = image.split('.')[1]; 
     fs.writeFile(`./testImages/${fileName}${pictureSize.suffix}.${fileExtension}`, binary); 
    }) 
} 
    var readFile$ = new Rx.Observable.bindNodeCallback(fs.readFile); 
    readFile$(`./${image}`) 
    .zip(Rx.Observable.of(pictureSizes), (binary, sizes) => 
     Rx.Observable.of({ binary: binary, sizes: sizes })) 
    .mergeMap(x => x.value.sizes.map(pictureSize => 
     resizeImage$(x.value.binary, pictureSize))) 
    .subscribe() 

Answer 1

Основываясь на вашем примере я думаю, что вы можете еще больше упростить ответ:

var pictureSizes = [ 
    {width: 100, size: 'thumbnail', suffix: '_t'}, 
    {width: 300, size: 'small', suffix: '_s'}, 
    {width: 600, size: 'medium', suffix: '_m'}, 
    {width: 1000, size: 'large', suffix: '_l'} 
]; 

const scaler$ = Rx.Observable.bindNodeCallback((binary, size, callback) => { 
    gm(binary) 
    .resize(size.width) 
    .toBuffer('jpg', callback); 
}); 

const readFile$ = Rx.Observable.bindNodeCallback(fs.readFile); 
const writeFile$ = Rx.Observable.bindNodeCallback(fs.writeFile); 

function scaleImage$(sizes) { 
    const scales = Rx.Observable.from(sizes); 

    return source => 
    source.flatMap(binary => 
     scales.flatMap(
     size => scaler$(binary, size), 
     (pictureSize, binary) => ({pictureSize, binary}) 
    ) 
    ); 
} 

function resize(imagePath, sizes) { 
    return readFile$(imagePath) 
    .let(scaleImage$(sizes)) 
    .flatMap(result => { 
     const {pictureSize, binary} = result; 
     const [name, ext] = image.split('.'); 
     return writeFile$(`./resized/${name}${pictureSize.suffix}.${ext}`, binary); 
    }); 
} 

Использование:

resize(imagePath, pictureSizes) 
    .subscribe(); 

Answer 2

В случае, если кто-то заинтересован, у меня есть ответ. Если кто-то захочет реорганизовать его дальше, сделайте это.

Остальные вопросы ... 1. Должен ли файл записи выполняться как наблюдаемый, чтобы ловить ошибки?
2. Я не уверен, почему mergeAll был нужен.

var pictureSizes = [ 
    {width: 100, size: 'thumbnail', suffix: '_t'}, 
    {width: 300, size: 'small', suffix: '_s'}, 
    {width: 600, size: 'medium', suffix: '_m'}, 
    {width: 1000, size: 'large', suffix: '_l'} 
]; 

function scaleImage$(binary, pictureSize) { 
    return new Rx.Observable(observer => { 
     gm(binary) 
     .resize(pictureSize.width) 
     .toBuffer('jpg', function(err, buffer) { 
      if (err) { 
      observer.error(err); 
      } else { 
      observer.next({ binary: buffer, pictureSize: pictureSize }); 
      observer.complete(); 
      } 
     }); 
    }) 
} 

function writeFile(binary, pictureSize, image) { 
    const fileName = image.split('.')[0]; 
    const fileExtension = image.split('.')[1]; 
    fs.writeFile(`./resized/${fileName}${pictureSize.suffix}.${fileExtension}`, binary); 
} 

function resizeImage(imagePath) { 
    var readFile$ = new Rx.Observable.bindNodeCallback(fs.readFile); 
    readFile$(imagePath) 
    .combineLatest(Rx.Observable.of(pictureSizes),(binary,y) => y.map(pictureSize => Object.assign({}, {binary, pictureSize}))) 
    .mergeMap(arr => arr.map(obj => scaleImage$(obj.binary, obj.pictureSize))) 
    .mergeAll() 
    .subscribe((obj) => writeFile(obj.binary, obj.pictureSize, image)) 

} 

И если вы хотите, синхронное поведение (масштаб изображения 1 -> записи изображения 1 -> масштаб изображения 2 ...), используйте concatMap и concatAll.