[资料分享] [分享]一个可以放大markdown格式帖子图片插件

1. 解决问题

论坛markdown格式的帖子图片无法被图片放大插件支持,导致阅读markdown格式的帖子图片浏览不友好

2. 解决方案

总体思路: 为markdown格式的图片添加支持放大插件支持的属性
方案步骤:

• 1.安装浏览器插件Tampermonkey

• 2.安装Tampermonkey插件Show My Img

确认安装

刷新论坛页面,可以发现图片已经支持放大了

3. 实现原理

核心代码, 非常基础简单的JS语句，用到了元素选择器与Dom对象操作

 let markdownContetnts = document.querySelectorAll('.parsedown-markdown');  // 获取当前页面所有的markdown内容层
        for (var i = 0; i < markdownContetnts.length; i++) {
                var markdownContetnt = markdownContetnts[i]; 
                let allImgs = markdownContetnt.querySelectorAll('img');  // 获取每个markdown层的所有的img对象
                for (var j = 0; j < allImgs.length; j++) {
        var img = allImgs[j];  // 获取单个img对象
        img.zoomfile = img.src;  // 添加img对象zoomfile属性，放大插件会需要这个属性来获取放大的图片路径
        img.classList.add('zoom'); //添加"zoom" class
        img.onclick = function(){zoom(this, this.src, 0, 0, 0);} // 添加鼠标点击监听事件，调用zoom方法放大图片
                }
                };