JQ实现图片放大缩小左右旋转（React）

原创已于 2022-09-26 10:13:55 修改 · 2.5k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #react.js #css

于 2021-12-31 14:54:10 首次发布

这篇博客探讨了如何使用HTML和React进行图片操作，包括图片的缩放、旋转功能。通过DOM操作，利用JavaScript实现点击按钮对图片进行大小调整和角度旋转。示例代码展示了具体的实现细节。

HTML代码：

      <div>
      <img id = 'imgage' src= '图片路径'  style={{ margin: 'auto'}} />
      <Button onClick = {()=>this.imgToSize(100)}>放大</Button>
      <Button onClick = {()=>this.imgToSize(-100)}>缩小</Button>
      <Button onClick = {()=>this.imgRotate('left')}>向左旋转</Button>
      <Button onClick = {()=>this.imgRotate('right')}>向右旋转</Button>
      </div>

对应的操作函数：

　　// 图片缩放
    imgToSize(size) {
    const img = $("#image");　//获取对应的dom
    const oWidth = img.width(); //取得图片的实际宽度
    const oHeight = img.height(); //取得图片的实际高度
    img.width(oWidth + size); //设置图片宽度
    img.height(oHeight + size / oWidth * oHeight);//设置图片高度
  }
  // 旋转图片
  imgRotate(direction) {
    const img = $("#image");
    if (direction == "left") {
        current = (current - 90) % 360; //特别注意：这里的current是用来记录每次的旋转角度，所以需要定义为全局变量来记录（React可以放入state中，每次执行完后更新一次）
    }
    else if (direction == "right") {
        current = (current + 90) % 360;
    }
   img.css('transform', 'rotate(' + current + 'deg)');
  }