отсечение изображения в реакции

Question

В, я хотел бы обрезать изображение, таким образом, как это должно быть просмотрено по ширине 1048px и высоте 280px в этом посте, как показано ниже,

Пример: дано изображение, скажем, 1048px ширина 280px высота, а затем я хочу обрезать его, чтобы иметь соотношение сторон 3: 4 со всей стороны поста.как показано ниже

Полученное изображение хорошо с 1048px и 280px, но на всех постах размыто.Как указано выше.Для обрезки изображения я использую ActJS с библиотекой машинописного текста и библиотеки легко-обрезки.

Это код

interface Iprops{
setLargeSize?: {
        width: number;
        height: number;
    };
}

if (props.setAspect != null) {
        // Set Aspect is provided so use that
        aspectWidth = props.setAspect.width;
        aspectHeight = props.setAspect.height;
    }
    else if (props.setSize != null) {
        // Set Size is provided so use that & override any other settings
        aspectWidth = props.setSize.width;
        aspectHeight = props.setSize.height;
    }
    else if (props.setLargeSize != null){
        aspectWidth = props.setLargeSize.width;
        aspectHeight = props.setLargeSize.height;
    }

Private load() {
    aspectWidth: this.props.setSize != null || this.props.setAspect || this.props.setLargeSize != null ? this.state.aspectWidth : aspect.width,
    aspectHeight: this.props.setSize != null || this.props.setAspect || this.props.setLargeSize != null ? this.state.aspectHeight : aspect.height 
};

Пожалуйста, помогите мне с настройкой правильного изображения и указаний.

Answer 1

Вы можете использовать концепцию SVG здесь .. Если вы визуализируете свое изображение с помощью тегов SVG.Затем вы можете установить высоту и ширину динамически / вручную.

<svg width="10" height="10">
  <rect x="0" y="0" width="10" height="10" fill="blue" />
</svg>

Это всего лишь пример.Вы можете использовать свои изображения, как это.