近日多位虎友图片好像都没有按照预期显示正常的方向，仿佛想要免费为我治疗颈椎病。 使用插件轻松放弃治疗。代码如下

版本1 前端旋转

带有旋转过渡动画 不耗费流量 但是无法适应宽度 简单粗暴

<script>
/** 旋转图片功能开始 版本1 前端旋转  **/
window.onload = () => {
    document.querySelectorAll('.topic-content img,.floor-content img').forEach((img) => {
        let ctrl = document.createElement("div");if (img.classList.contains('hu60_face')||img.classList.contains('avatar')) {ctrl = img;} else {ctrl.innerText = '【放弃治疗颈椎病】';}
        ctrl.onclick = (e) => {e.preventDefault();let rotate = parseInt(img.style.transform.split('(')[1]);img.style.transition = 'all 0.3s';img.style.marginLeft='20%';img.style.transform = 'rotate(' + ((isNaN(rotate) ? 0 : rotate) - 90) + 'deg)'}
        img.parentNode.insertBefore(ctrl, null);
    })
}
/** 旋转图片功能结束 版本1 前端旋转 **/
</script>

版本2 服务端适配处理 (已失效)

不带有旋转过渡动画 最多耗费4次流量 可以自适应宽度 点击图片新窗口打开的是旋转后的图片

虎绿林离开七牛云后，该方法已失效。

<script>
/** 旋转图片功能 服务端实现版  开始 **/
window.onload = () => {
    document.querySelectorAll('.topic-content img,.floor-content img').forEach((img) => {
        let ctrl = document.createElement("div");
        if (img.classList.contains('hu60_face') || img.classList.contains('avatar')) {
            ctrl = img;
        } else {
            ctrl.innerText = '【放弃治疗颈椎病】';
        }
        ctrl.onclick = (e) => {
            e.preventDefault();
            const str = '?imageMogr2/rotate/';
            if (img.src.includes(str)) {
                const src = img.src.split(str);
                modifySRC(src[0] + str + (parseInt(src[1]) - 90) % 360)
            } else {
                fetch(img.src).then((res) => {
                    modifySRC(res.url + str + '-90')
                })
            }
            function modifySRC(src) {
                img.src = src;
                img.parentElement.href = img.src;
                img.parentElement.target = '_blank';
            }
        }
        img.parentNode.insertBefore(ctrl, null);
    })
}
/** 旋转图片功能  服务端实现版  结束 **/
</script>

装好插件来试试吧:(下图来自本站帖子:饿了么美团平台是真6啊，把骑手都变成个体工商户了)

版本3 采用canvas前端重绘旋转图片，使用canvas的尺寸自适应dom的渲染。

既能自适应宽度 还无需再次网络加载 缺点是暂未实现

 // TODO 版本3 {勉强}

红米Note4超高配版(银色)

@Dieinwarm，啊 刚刚做了下修正
红米Note4超高配版(银色)

@加勒比海带，我加了一句 img.style.marginLeft='20%'; 比较简单粗暴
红米Note4超高配版(银色)

@加勒比海带，现在有版本2 服务端版本 可以试试

/** 旋转图片功能 服务端实现版  开始 **/
参考更新的帖子内容 ## 版本2
/** 旋转图片功能  服务端实现版  结束 **/

红米Note4超高配版(银色)

@o，放在<script>和</script>中间

@加勒比海带，喜提彩蛋一枚
红米Note4超高配版(银色)

@加勒比海带，前端版本还是后端版本
红米Note4超高配版(银色)

@o，嗯 这个适合PC版本 手机端体验不怎么样 还是旋转设备吧
红米Note4超高配版(银色)

@o，图片下方会出现一个可点击链接。

@寻梦xunm，
红米Note4超高配版(银色)