纯样式CSS或使用JS的canvas实现图片旋转

原理大致是,将img图片转为canvas对象,输出新的图片路径,回显到img标签中

图片时的图片旋转方法实现

效果如图:

image-20230131142927615

点击旋转,图片也跟着旋转。共有4个方向,分别是0,90,180,270度。

一、CSS3实现

如果是按照我的思路,那自然就是使用CSS3transformrotate属性了。

img{
    transform:rotate(90deg);
}

实际情况也是可以旋转的,简单方便,只适用于临时查看。

二、JS的canvas实现

原理大致是,将img图片转为canvas对象,输出新的图片路径,回显到img标签中。

大致的代码如下:

/** 图片旋转后返回base64
 * @param {Object} img 图片对象
 * @param {Number} rotate 旋转角度 90° 180° 270° 360°=default
 * @returns {String} base64图片
 *
 */
export function imageRotate(img, rotate) {
  let canvas = document.createElement("canvas");
  let ctx = canvas.getContext("2d");
  switch (rotate) {
    case 90: // 旋转90°
      canvas.width = img.height;
      canvas.height = img.width;
      ctx.rotate((90 * Math.PI) / 180);
      ctx.drawImage(img, 0, -img.height, img.width, img.height);
      break;
    case 180: // 旋转180°
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.rotate((180 * Math.PI) / 180);
      ctx.drawImage(img, -img.width, -img.height, img.width, img.height);
      break;
    case 270: // 旋转270°
      canvas.width = img.height;
      canvas.height = img.width;
      ctx.rotate((-90 * Math.PI) / 180);
      ctx.drawImage(img, -img.width, 0, img.width, img.height);
      break;
    default:
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      break;
  }
  return canvas.toDataURL("image/png");
}

将以上代码保存为rotate.js

当点击旋转图标时,调用该函数,传入图片对象和旋转角度:

import imageRotate from './rotate';
methods:{
    this.base64 = imageRotate(this.data, rotate);
}
// base64即为可直接显示图片的base64地址
<img :src="base64" />

以上在vue项目中使用无任何问题。

除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 884
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top