reactjs中的剪切图像

Question

在这里，我想裁剪图像，就像在帖子中以1048px的宽度和280px的高度查看一样，如下所示，

例子：给定一个图像，比如说1048px宽280px高，然后我想将其裁切为在整个文章侧具有3：4的宽高比。 像下面的

生成的图像在1048像素和280像素时效果很好，但是在所有帖子上都是模糊的。如上。 我正在使用带有类型脚本的reactJS和react-easy-crop库来裁剪图像。

这是代码

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>

这只是一个例子。您可以像这样使用图像。