Question

我一直在努力做到以下几点：

在React中我有一个固定大小的div，在里面我有一个图像。

我有2个范围滑块。一个人在拖动时缩放图像。另一个以负方向或正方向旋转图像。

现在这很好用。但是当我向任一方向旋转图像时，我希望图像始终填充父div容器的整个区域，因为我最终需要根据父div裁剪图像。因此，我不想要任何“空”区域。因此图像需要调整其高度（和宽度），以便在旋转时它总是填充父div的区域。

使用DropZone和php文件调用上传图像，然后在父div中显示。

任何帮助都将受到高度赞赏。

提前致谢。

以下代码和屏幕截图。

    <div style={{overflow: 'hidden', width:'280px', height:'200px', border: '1px dotted red'}} className='centered'>
                   <img src={imageFileHere} style={{ transform:'rotate('+this.state.rotateLevel+'deg) translate(-50%, -50%)', position: 'relative', top:'50%', left:'50%', width: 'calc(320px + '+ this.state.zoomLevel+'px)'}} alt='Setup'/>
                   </div>

                   Scale Image:<br />
                   <input onChange={(e) => {this._resizeImg(e)}} defaultValue='1' type='range' min='10' max='350' style={{width: '70%', maxWidth: '280px'}} /> Rotate Image:<br />
                   <input onChange={(e) => {this._checkRotateValue(e)}} defaultValue='0' type='range' min='-80' max='80' style={{width: '70%', maxWidth: '280px'}} />
</div>
</div>

enter image description here

旋转img

0 个答案: