浏览器中的图片如何直接旋转角度?

感觉小众已经成了专门解决疑难杂症的专业论坛了。
向各位请教一下,工作需要,点击一个包含图片的页面,该图片会呈现在一个单独跳出的标签页中,有什么尽量简单的办法能旋转这个跳出来的标签页中的图片?
目前仅仅已知,可以使用ctrl+滚轮来放大缩小。
感谢解答!

控制台运行element.style.transform="rotate(-90deg)"

firefox中可以在选定的元素上右键-在选定的元素上使用

抱歉不会写书签小工具 这个也是现查的

不太会用,是这样?

可以在元素属性里直接编辑 添加

style="transform: rotate(-90deg);"

如下图
image

感谢回复,不过真正要旋转图片的是我部门员工,一堆大妈,我不能让她们进行这种“高级”操作,她们会杀了我的。
希望能有更加简单的办法实现。
再次向您表示感谢。

提供一个Quicker动作供参考:

这个动作是模拟点击右键菜单复制图片,然后读取剪贴板中的图片显示出来。这个图片窗口是可以进行旋转的。

如果所有的图片旋转的是固定的角度,也可以在动作中通过图片处理的步骤自动旋转以后再显示。

另外也可以通过Quicker的浏览器扩展来运行脚本操作网页。

我觉得这个扩展可以啊:

右键图片,选择 Rotate 就能旋转了。

写了一个小书签,把以下代码当做网址,保存为书签栏的书签,然后点击一下旋转90度,只针对在新标签页中打开的图片设计。

javascript:(function(){/* rotate_IMG.2021.09.14 */if(!document.body.querySelector("style#rotate_img")){const a=document.createElement("style");a.id="rotate_img",a.innerHTML=`img[data-deg="90"] {transform: rotate(90deg);}img[data-deg="180"] {transform: rotate(180deg);}img[data-deg="270"] {transform: rotate(270deg);}`,document.body.appendChild(a)}const img=document.body.querySelector("img");!img.dataset.deg||360<=+img.dataset.deg?img.dataset.deg=90:img.dataset.deg=+img.dataset.deg+90;})()

2021.09.15 20:06

以此为案例写了一篇实战记录( JS 脚本实战案例 0001 - #2,来自 ejmoog ),同时搞了一份更加简单的代码(附在底下),反正两个代码都能用,达到的效果都一样,如果你看到了这里就用下面的代码,如果已经在使用上面的代码了,也没有必要特别更新。

javascript:(function(){ const oldDeg = +document.body.querySelector('img').dataset.deg;    const newDeg = ((oldDeg ? oldDeg : 0) + 90)%25360;document.body.querySelector('img').style.transform = 'rotate('+newDeg+'deg)';document.body.querySelector('img').dataset.deg = newDeg;})()
3 个赞
2 个赞

在这个页面直接用的话 就看见左上角的logo在转 :joy:

针对这个情况书写的,只对页面中第1个图片有效

是element的指向,element是页面元素的意思,想旋转哪个图片这里element应该是那个图片元素

Chrome系浏览器不都有“在新标签页打开图片”吗,结合楼上的方法应该就够了吧

这个我就回答一波,结合这个脚本实现图片翻转
PIcviewer CE+
具体效果如下:

1 个赞

如果使用的是vivaldi浏览器,事情会简单许多。

在vivaldi浏览器的状态栏,有个页面行为按钮,里面就有页面旋转【不过默认是旋转45度,不知道这是什么设定,需要改成90度】。

修改安装文件夹下(大致路径参考:C:\Users\Administrator\AppData\Local\Vivaldi\Application\4.1.2369.21\resources\vivaldi\user_files)

有个 Skewed_Images.js 文件,用记事本打开,把45度改成90度就好了。

Snipaste_2021-09-14_18-15-55

实际使用时如下:
测试

1 个赞

这个办法好,我用了一下,很顺利,也比较方便。我可以给几位大姐的浏览器设置好,以后她们点一下按钮就可以旋转图片了。

同时感谢以上所有帮我想办法的大佬们,感谢你们!谢谢!!

我这里就一张图片(营业执照),正合我意啊!

就是根据你的需求定制的脚本呀

1 个赞

对此网站无效,只能旋转LOGO,是不是国内zf网站都太牛鼻了?:slight_smile:
法律法规数据库-标题搜索页面 (chinalaw.gov.cn)

这个脚本只旋转页面中第一个图片