Как настроить загрузку изображения strapi для использования сторонней библиотеки для сжатия изображений?

Я новичок в strapi, и я пытаюсь найти способ сжать изображение, которое загружается на strapi, которое затем будет отправлено на статический сайт gatsby. Как я могу это сделать? Я нашел библиотеку npm image-compress.js, но я не знаю, как интегрировать ее в strapi как для поля в каждом типе контента, так и для редактора WYSWYG. Кто-нибудь может мне помочь? Если возможно, можем ли мы настроить его при загрузке в Strapi в зависимости от размера дисплея в gatsby?

1-я попытка интеграции компрессора изображений:

Вот мой upload.js:

const Compressor = require('image-compressor')
module.exports = {
upload: async (ctx) => {
    // Retrieve provider configuration.
    const config = await strapi.store({
      environment: strapi.config.environment,
      type: 'plugin',
      name: 'upload'
    }).get({ key: 'provider' });

    // Verify if the file upload is enable.
    if (config.enabled === false) {
      strapi.log.error('File upload is disabled');
      return ctx.badRequest(null, ctx.request.admin ? [{ messages: [{ id: 'Upload.status.disabled' }] }] : 'File upload is disabled');
    }

    // Extract optional relational data.
    const { refId, ref, source, field } = ctx.request.body.fields;
    let { files = {} } = ctx.request.body.files;

    if (_.isEmpty(files)) {
      return ctx.send(true);
    }

    //integrate image-compressor library to enhance uploaded image
    var imageCompressor = new Compressor.ImageCompressor;

    var compressorSettings = {
            toWidth : 100,
            toHeight : 100,
            mimeType : 'image/png',
            mode : 'strict',
            quality : 0.6,
            grayScale : true,
            sepia : true,
            threshold : 127,
            vReverse : true,
            hReverse : true,
            speed : 'low'
        };

    files.map(file => imageCompressor.run(file, compressorSettings), () => {})

    // Transform stream files to buffer
    // const buffers = await strapi.plugins.upload.services.upload.bufferize(ctx.request.body.files.files);
    const buffers = await strapi.plugins.upload.services.upload.bufferize(files.files);
    const enhancedFiles = buffers.map(file => {
      if (file.size > config.sizeLimit) {
        return ctx.badRequest(null, ctx.request.admin ? [{ messages: [{ id: 'Upload.status.sizeLimit', values: {file: file.name} }] }] : `${file.name} file is bigger than limit size!`);
      }

      // Add details to the file to be able to create the relationships.
      if (refId && ref && field) {
        Object.assign(file, {
          related: [{
            refId,
            ref,
            source,
            field
          }]
        });
      }

      return file;
    });

    // Something is wrong (size limit)...
    if (ctx.status === 400) {
      return;
    }

    const uploadedFiles = await strapi.plugins.upload.services.upload.upload(enhancedFiles, config);

    // Send 200 `ok`
    ctx.send(uploadedFiles.map((file) => {
      // If is local server upload, add backend host as prefix
      if (file.url && file.url[0] === '/') {
        file.url = strapi.config.url + file.url;
      }

      if (_.isArray(file.related)) {
        file.related = file.related.map(obj => obj.ref || obj);
      }

      return file;
    }));
  },

и я получил эту ошибку, запустив strapi start:

/home/mike/Desktop/clik.asia.admin/node_modules/image-compressor/image-compressor.js:295
})(window, document);
   ^

ReferenceError: window is not defined
    at Object.<anonymous> (/home/mike/Desktop/clik.asia.admin/node_modules/image-compressor/image-compressor.js:295:4)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/mike/Desktop/clik.asia.admin/plugins/upload/controllers/Upload.js:10:20)
    at Module._compile (module.js:652:30)

person Acoustic Mike    schedule 24.08.2018    source источник
comment
Это открытая проблема в плагине gatsby strapi: strapi / gatsby-source-strapi # 8   -  person Fabian Schultz    schedule 24.08.2018


Ответы (2)


Если вы хотите, вы можете настроить upload service, чтобы добавить пользовательскую логику (используя image-compress.js) для сжатия изображений перед их загрузкой.

Вот контроллер маршрута /upload: https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-upload/controllers/Upload.js#L12

Вот служебная функция: https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-upload/services/Upload.js#L56

person Jim LAURIE    schedule 26.08.2018
comment
Думаю, это может сработать. Вы можете мне еще немного помочь? Я пробовал интегрировать его, но думаю, что делаю это неправильно. Кроме того, я не очень понимаю документацию. Каков третий параметр метода run ()? Я прикреплю сюда свой фрагмент кода. - person Acoustic Mike; 28.08.2018
comment
я не знаю, какую функцию написать в качестве третьего параметра cos idk, что она делает - person Acoustic Mike; 28.08.2018

В настоящее время это невозможно только со Strapi. Я предлагаю вам загрузить свои файлы в Cloudinary (https://github.com/strapi/strapi/tree/master/packages/strapi-upload-cloudinary) и использовать их API для изменения их размера.

person Pierre    schedule 24.08.2018