首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >哔哔图片问题

哔哔图片问题

作者头像
SerMs
发布于 2022-04-20 01:31:49
发布于 2022-04-20 01:31:49
33200
代码可运行
举报
文章被收录于专栏:SerMsBlogSerMsBlog
运行总次数:0
代码可运行

本文根据洪哥哔哔教程二改~解决哔哔发送图片问题

相关教程

教程地址

洪哥哔哔教程

洪哥哔哔教程https://blog.zhheo.com/p/a6947667.html

问题说明

可以看到问题很明显

  1. 图片大小
  2. 图片上下有多余得代码(洪哥js得问题)
  3. 无法预览

修改步骤

  • 源码修改方式
  • cdn链接替换(推荐)

将洪哥heobbe.js文件拉取到博客存放js得目录下

修改其中得urlToLink方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function urlToLink(str) {
    console.log("判断是否是图片", str.indexOf("http"));
    if (str.indexOf("http") != -1) {
        var re_forpic = /\bhttps?:[^:<>"]*\/([^:<>"]*)(\.(jpeg)|(png)|(jpg)|(webp))(!blogimg)?/g;
        var a1;
        var a2;
        str.replace(re_forpic, function (imgurl) {
            a1 = "<a href=" + imgurl + " data-fancybox='gallery' data-caption='' data-thumb=" + imgurl + ">";
            a2 = "<img src=" + imgurl + "></img></a>";
        });
        str = a1 + a2;
        return a1 + a2;
    } else {
        var re = /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;

        str = str.replace(re, function (website) {
            return " <a href='" + website + "'rel='noopener' target='_blank'>↘链接↙</a>";
        });
        return str;
    }
}

修改完后全文(可直接复制这个粘贴替换heobber.js)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// if (document.querySelector('#bber-loading')) {
//   var loading_pic = document.getElementById('bber-loading');
//   loading_pic.innerHTML = '<span id="moments_loading"><i class="fa fa-spinner fa-spin"></i></span>';
// }

function getbbdata() {
    var bbsurl = bbapiurl

    var httpRequest = new XMLHttpRequest(); //第一步:建立所需的对象
    httpRequest.open('GET', bbsurl, true); //第二步:打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
    httpRequest.send(); //第三步:发送请求  将请求参数写在URL中
    /**
     * 获取数据后的处理程序
     */
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var json = httpRequest.responseText; //获取到json字符串,还需解析
            var obj = eval('(' + json + ')');
            // console.log(obj.data)
            const bbArray = obj.data.map(e => {
                return {
                    'date': e.date,
                    'content': e.content,
                    'from': e.from
                }
            })
            // console.log(fundsArray)
            saveToLocal.set('zhheo-bb', JSON.stringify(bbArray), 5 / (60 * 24))
            const data = saveToLocal.get('zhheo-bb');
            generateBBHtml(JSON.parse(data))
        }
    };
}

var generateBBHtml = array => {
    var $dom = document.querySelector('#bber');
    var result = '<section class="timeline page-1"><ul><div class="list">'
    console.log(array)

    if (array.length) {
        for (let i = 0; i < array.length; i++) {
            var from_icon = '';
            if (array[i].from.indexOf("iPhone") != -1) {
                from_icon = '<i class="fas fa-mobile-alt"></i>';
            } else if (array[i].from.indexOf("iPad") != -1) {
                from_icon = '<i class="fas fa-tablet-alt"></i>';
            } else if (array[i].from.indexOf("Mac") != -1) {
                from_icon = '<i class="fas fa-laptop"></i>';
            } else if (array[i].from.indexOf("微信") != -1) {
                from_icon = '<i class="fab fa-weixin" style="font-size: 0.6rem"></i>';
            } else {
                from_icon = '<i class="fas fa-tools"></i>';
            };

            var d = new Date(array[i].date);
            var dtime = array[i].date,
                data = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
            var dataCont = '<p class="datacont">' + urlToLink(array[i].content) + '</p>';
            var dataTime = '<p class="datatime">' + data + '</p>';


            result += `<li class="item"><div>` + dataTime + dataCont + `</p><p class="datafrom"><small>` + from_icon + array[i].from + `</small></p></div></li>`;
        }
    } else {
        result += '!{_p("aside.card_funds.zero")}';
    }
    result += '</div></ul></section>'

    var $dom = document.querySelector('#bber');

    $dom.innerHTML = result;
    Lately({
        'target': '#bber .datatime'
    });
    window.lazyLoadInstance && window.lazyLoadInstance.update();
    window.pjax && window.pjax.refresh($dom);
}

if (document.querySelector('#bber')) {
    getbbdata()
}
function urlToLink(str) {
    console.log("判断是否是图片", str.indexOf("http"));
    if (str.indexOf("http") != -1) {
        var re_forpic = /\bhttps?:[^:<>"]*\/([^:<>"]*)(\.(jpeg)|(png)|(jpg)|(webp))(!blogimg)?/g;
        var a1;
        var a2;
        str.replace(re_forpic, function (imgurl) {
            a1 = "<a href=" + imgurl + " data-fancybox='gallery' data-caption='' data-thumb=" + imgurl + ">";
            a2 = "<img src=" + imgurl + "></img></a>";
        });
        str = a1 + a2;
        return a1 + a2;
    } else {
        var re = /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;

        str = str.replace(re, function (website) {
            return " <a href='" + website + "'rel='noopener' target='_blank'>↘链接↙</a>";
        });
        return str;
    }
}
/*
MIT License - http://www.opensource.org/licenses/mit-license.php
For usage and examples, visit:
https://tokinx.github.io/lately/
Copyright (c) 2017, Biji.IO
*/
var $jscomp = $jscomp || {};
$jscomp.scope = {};
$jscomp.arrayIteratorImpl = function (b) {
    var g = 0;
    return function () {
        return g < b.length ? {
            done: !1,
            value: b[g++]
        } : {
            done: !0
        }
    }
};
$jscomp.arrayIterator = function (b) {
    return {
        next: $jscomp.arrayIteratorImpl(b)
    }
};
$jscomp.makeIterator = function (b) {
    var g = "undefined" != typeof Symbol && Symbol.iterator && b[Symbol.iterator];
    return g ? g.call(b) : $jscomp.arrayIterator(b)
};
(function (b, g) {
    var p = function (h) {
        var d = h.lang || {
            second: "\u79d2",
            minute: "\u5206\u949f",
            hour: "\u5c0f\u65f6",
            day: "\u5929",
            month: "\u4e2a\u6708",
            year: "\u5e74",
            ago: "\u524d",
            error: "NaN"
        };
        h = $jscomp.makeIterator(document.querySelectorAll(h.target || ".time"));
        for (var c = h.next(); !c.done; c = h.next()) {
            c = c.value;
            var a = c.dateTime;
            var e = c.title,
                f = c.innerHTML;
            if (!a || isNaN(new Date(a = a.replace(/(.*)[a-z](.*)\+(.*)/gi, "$1 $2").replace(/-/g, "/"))))
                if (e && !isNaN(new Date(e = e.replace(/-/g, "/")))) a = e;
                else if (f && !isNaN(new Date(f =
                    f.replace(/-/g, "/")))) a = f;
            else break;
            c.title = a;
            a = new Date(a);
            a = ((new Date).getTime() - a.getTime()) / 1E3;
            e = a / 60;
            f = e / 60;
            var k = f / 24,
                l = k / 30,
                m = l / 12;
            c.innerHTML = (1 <= m ? Math.floor(m) + d.year : 1 <= l ? Math.floor(l) + d.month : 1 <= k ? Math.floor(k) + d.day : 1 <= f ? Math.floor(f) + d.hour : 1 <= e ? Math.floor(e) + d.minute : 1 <= a ? Math.floor(a) + d.second : d.error) + d.ago
        }
    };
    var n = function () {
        return this || (0, eval)("this")
    }();
    "Lately" in n || (n.Lately = p)
})();

接着在css文件中添加:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.datacont img{
    width: 100%;
}

直接把洪哥得heobbe.js替换成,作者编写好得js链接:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://cdn.jsdelivr.net/npm/msstatic@1.0.1/js/heobber.js

接着在css文件中添加:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.datacont img{
    width: 100%;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
Google Earth Engine ——Landsat 5 TM合成影像8天/32天/年际归一化植被指数(NDVI)指数数据集
These Landsat 4 TM composites are made from Level L1T orthorectified scenes, using the computed top-of-atmosphere (TOA) reflectance. See Chander et al. (2009) for details on the TOA computation.
此星光明
2024/02/02
1860
Google Earth Engine ——Landsat 5 TM合成影像8天/32天/年际归一化植被指数(NDVI)指数数据集
Google Earth Engine ——LANDSAT 4系列增强型植被指数EVI指数8天/32天/年际合成数据集
These Landsat 4 TM composites are made from Level L1T orthorectified scenes, using the computed top-of-atmosphere (TOA) reflectance. See Chander et al. (2009) for details on the TOA computation.
此星光明
2024/05/24
1060
Google Earth Engine ——LANDSAT 4系列增强型植被指数EVI指数8天/32天/年际合成数据集
Google Earth Engine ——LANDSAT 7归一化植被指数NDVI数据集
These Landsat 7 composites are made from Level L1T orthorectified scenes, using the computed top-of-atmosphere (TOA) reflectance. See Chander et al. (2009) for details on the TOA computation.
此星光明
2024/02/02
4190
Google Earth Engine ——LANDSAT 7归一化植被指数NDVI数据集
Google Earth Engine ——LANDSAT8系列归一化植被指数NDVI数据集
These Landsat 8 composites are made from Level L1T orthorectified scenes, using the computed top-of-atmosphere (TOA) reflectance. See Chander et al. (2009) for details on the TOA computation.
此星光明
2024/02/02
2460
Google Earth Engine ——LANDSAT8系列归一化植被指数NDVI数据集
Google Earth Engine ——LANDSAT 4系列归一化植被指数NDVI——8天/32天/年际合成数据集
These Landsat 4 TM composites are made from Level L1T orthorectified scenes, using the computed top-of-atmosphere (TOA) reflectance. See Chander et al. (2009) for details on the TOA computation.
此星光明
2024/02/02
2200
Google Earth Engine ——LANDSAT 4系列归一化植被指数NDVI——8天/32天/年际合成数据集
Google Earth Engine ——LANDSAT 7增强植被指数(EVI)数据集
These Landsat 7 composites are made from Level L1T orthorectified scenes, using the computed top-of-atmosphere (TOA) reflectance. See Chander et al. (2009) for details on the TOA computation.
此星光明
2024/02/02
2300
Google Earth Engine ——LANDSAT 7增强植被指数(EVI)数据集
Google Earth Engine(GEE)——landsat (4/5/7/8)annual年度NDVI数据
ee.ImageCollection("LANDSAT/LC8_L1T_ANNUAL_NDVI")
此星光明
2024/02/02
2820
Google Earth Engine(GEE)——landsat (4/5/7/8)annual年度NDVI数据
Google Earth Engine ——MODIS Terra/Aqua Daily EVI数据
The Enhanced Vegetation Index (EVI) is generated from the Near-IR, Red and Blue bands of each scene, and ranges in value from -1.0 to 1.0. See Huete et al. (2002) for details. This product is generated from the MODIS/MOD09GA surface reflectance composites.
此星光明
2024/02/02
1350
Google Earth Engine ——MODIS Terra/Aqua Daily EVI数据
Google Earth Engine ——MODIS Terra/Aqua Daily NDVI数据集
The Normalized Difference Vegetation Index is generated from the Near-IR and Red bands of each scene as (NIR - Red) / (NIR + Red), and ranges in value from -1.0 to 1.0. This product is generated from the MODIS/MOD09GA surface reflectance composites.
此星光明
2024/02/02
2050
Google Earth Engine ——MODIS Terra/Aqua Daily NDVI数据集
Google Earth Engine ——MYD15A2H V6 MODIS综合叶面积指数(LAI)和光合有效辐射分数(FPAR)产品是一个500米分辨率的8天综合数据集
The MYD15A2H V6 MODIS combined Leaf Area Index (LAI) and Fraction of Photosynthetically Active Radiation (FPAR) product is an 8-day composite dataset at 500m resolution. The algorithm chooses the "best" pixel available from all the acquisitions of the Aqua sensor from within the 8-day period.
此星光明
2024/02/02
3220
Google Earth Engine ——MYD15A2H V6 MODIS综合叶面积指数(LAI)和光合有效辐射分数(FPAR)产品是一个500米分辨率的8天综合数据集
Google Earth Engine(地表参量计算)
本期我们讲一下如何利用GEE对地表参量(以地表蒸散为例)进行计算。地表蒸散的计算不光会用到遥感数据还会用到一些气象数据。这里的气象数据我们可以使用再分析数据。
GIS与遥感开发平台
2022/04/29
1K1
Google Earth Engine(地表参量计算)
Google Earth Engine ——MOD15A2H V6是MODIS综合叶面积指数(LAI)和光合有效辐射分数(FPAR)产品500米分辨率的8天综合数据集
The MOD15A2H V6 MODIS combined Leaf Area Index (LAI) and Fraction of Photosynthetically Active Radiation (FPAR) product is an 8-day composite dataset at 500m resolution. The algorithm chooses the "best" pixel available from all the acquisitions of the Terra sensor from within the 8-day period.
此星光明
2024/02/02
5040
Google Earth Engine ——MOD15A2H V6是MODIS综合叶面积指数(LAI)和光合有效辐射分数(FPAR)产品500米分辨率的8天综合数据集
中国净初级生产力年度合成产品NPP(MYD17A3H.006)
中国净初级生产力年度合成产品NPP(MYD17A3H.006)由航天宏图实验室提供,根据NASA MODIS数据(MYD17A3H.006)通过航天宏图 Smoother计算得到的平滑后NPP产品,解决了影像云雾覆盖、像元异常值等问题。对处理后的覆盖中国区域的影像结果镶嵌,生成了分辨率为500米的年合成产品。前言 – 人工智能教程
此星光明
2024/02/02
2840
Google Earth Engine(GEE)——利用归一化建筑指数NDBI(不透水层)提取建筑物
有粉丝问到,如何进行建筑物的提取,其实这里有两个方法,一个是有一个数据集可以直接获取建筑物的轮廓,具体内容可以看我之前的文章:
此星光明
2024/02/02
1.2K0
Google Earth Engine(GEE)——利用归一化建筑指数NDBI(不透水层)提取建筑物
GEE(Google Earth Engine)计算全球的NDVI和SAVI!
此次案例主要是通过Landsat7来进行2002年11月-12月的NDVI和SAVI指数的计算,而且是通过表达式,这中表达是在于,以后你也想通过波段计算的话,可以改改公式即可使用,话不多说!上代码:
此星光明
2024/02/01
2070
GEE(Google Earth Engine)计算全球的NDVI和SAVI!
Google Earth Engine ——MOD13Q1.006 Terra Vegetation Indices 16-Day Global 250m归一化植被指数(NDVI)和增强植被指数EVI
The MOD13Q1 V6 product provides a Vegetation Index (VI) value at a per pixel basis. There are two primary vegetation layers. The first is the Normalized Difference Vegetation Index (NDVI) which is referred to as the continuity index to the existing National Oceanic and Atmospheric Administration-Advanced Very High Resolution Radiometer (NOAA-AVHRR) derived NDVI. The second vegetation layer is the Enhanced Vegetation Index (EVI) that minimizes canopy background variations and maintains sensitivity over dense vegetation conditions. The EVI also uses the blue band to remove residual atmosphere contamination caused by smoke and sub-pixel thin cloud clouds. The MODIS NDVI and EVI products are computed from atmospherically corrected bi-directional surface reflectances that have been masked for water, clouds, heavy aerosols, and cloud shadows.
此星光明
2024/02/02
2630
Google Earth Engine ——MOD13Q1.006 Terra Vegetation Indices 16-Day Global 250m归一化植被指数(NDVI)和增强植被指数EVI
Google Earth Engine ——Landsat 5 TM合成影像8天/32天/年际归一化植被指数(NDWI)指数数据集
These Landsat 5 TM composites are made from Level L1T orthorectified scenes, using the computed top-of-atmosphere (TOA) reflectance. See Chander et al. (2009) for details on the TOA computation.
此星光明
2024/02/02
1570
Google Earth Engine ——Landsat 5 TM合成影像8天/32天/年际归一化植被指数(NDWI)指数数据集
Google Earth Engine(插值与重采样)
克里金插值是我们常用的插值方法,在GEE中为kriging,类似的还有反距离权重插值(inverseDistance)
GIS与遥感开发平台
2022/04/29
2.7K0
Google Earth Engine(插值与重采样)
Google Earth Engine(GEE)—geemap天气、植被数据可视化时间序列分析
此星光明
2024/02/02
1990
Google Earth Engine(GEE)——当加载图表的时候出现错误No features contain non-null values of “system:time_start“.
Error generating chart: The image collection is empty.
此星光明
2024/02/02
2320
Google Earth Engine(GEE)——当加载图表的时候出现错误No features contain non-null values of “system:time_start“.
推荐阅读
Google Earth Engine ——Landsat 5 TM合成影像8天/32天/年际归一化植被指数(NDVI)指数数据集
1860
Google Earth Engine ——LANDSAT 4系列增强型植被指数EVI指数8天/32天/年际合成数据集
1060
Google Earth Engine ——LANDSAT 7归一化植被指数NDVI数据集
4190
Google Earth Engine ——LANDSAT8系列归一化植被指数NDVI数据集
2460
Google Earth Engine ——LANDSAT 4系列归一化植被指数NDVI——8天/32天/年际合成数据集
2200
Google Earth Engine ——LANDSAT 7增强植被指数(EVI)数据集
2300
Google Earth Engine(GEE)——landsat (4/5/7/8)annual年度NDVI数据
2820
Google Earth Engine ——MODIS Terra/Aqua Daily EVI数据
1350
Google Earth Engine ——MODIS Terra/Aqua Daily NDVI数据集
2050
Google Earth Engine ——MYD15A2H V6 MODIS综合叶面积指数(LAI)和光合有效辐射分数(FPAR)产品是一个500米分辨率的8天综合数据集
3220
Google Earth Engine(地表参量计算)
1K1
Google Earth Engine ——MOD15A2H V6是MODIS综合叶面积指数(LAI)和光合有效辐射分数(FPAR)产品500米分辨率的8天综合数据集
5040
中国净初级生产力年度合成产品NPP(MYD17A3H.006)
2840
Google Earth Engine(GEE)——利用归一化建筑指数NDBI(不透水层)提取建筑物
1.2K0
GEE(Google Earth Engine)计算全球的NDVI和SAVI!
2070
Google Earth Engine ——MOD13Q1.006 Terra Vegetation Indices 16-Day Global 250m归一化植被指数(NDVI)和增强植被指数EVI
2630
Google Earth Engine ——Landsat 5 TM合成影像8天/32天/年际归一化植被指数(NDWI)指数数据集
1570
Google Earth Engine(插值与重采样)
2.7K0
Google Earth Engine(GEE)—geemap天气、植被数据可视化时间序列分析
1990
Google Earth Engine(GEE)——当加载图表的时候出现错误No features contain non-null values of “system:time_start“.
2320
相关推荐
Google Earth Engine ——Landsat 5 TM合成影像8天/32天/年际归一化植被指数(NDVI)指数数据集
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验