NiceLeeのBlog 用爱发电 bilibili~

PC端图片阅读的一种方法

2021-01-15
nIceLee

阅读:


很多时候有这么个需求,上下两张图片内容连续不可分割,这时需要一张接一张不间断地纵向浏览。(横向同理)
有时候还有这么个情况,1.jpg、2.jpg…9.jpg、10.jpg,但看图时的阅读顺序并不是按照我们想象中的来。
比如1.jpg、10.jpg、2.jpg… 怎么办呢?
自己做个html网页,用浏览器来阅读。

基础

<!DOCTYPE HTML>
<html>
    <head>
        <title>图片预览</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <style>
            body{text-align:center}
            .box{wide:720px;margin:0 auto}
        </style>
    </head>
    <body>
        <div id="box">
            <div><img id="0" src="00000.jpg" width="720px" alt="00000.jpg"/></div>
            <div><img id="1" src="00001.jpg" width="720px" alt="00001.jpg"/></div>
        </div>
    </body>
<script type="text/javascript">
// 格式化数字
function formatInt(i){
    if(i < 10){
        return "0000" + i;
    }else if(i < 100){
        return "000" + i;
    }else{
        return "00" + i;
    }
}
// 画出200个图片div
var box = document.getElementById("box");
html = "";
for (i = 0; i < 200; i++) {
    num = formatInt(i);
    src = num + ".jpg";
    div = '<div><img id="' + i +'" src="' + src +'" width="720px" alt="' + src +'"/></div>';
    html += div;
}
box.innerHTML = html;

/* 当图片名称与默认不符合的时候,可以找到规律后在这里修改,或直接在上方修改
for (i = 0; i < 200; i++) {
    var img = document.getElementById(i); // document.querySelector("#" + i)
    img.getAttributeNode("src").value = "漫画所在文件夹/" + formatInt(i) + ".jpg";
}*/
</script>
</html>

升级版

一个html文件搞定所有,存在章节切换功能。
适用于在存在多个文件夹,且图片命名基本一致的情况。

<!DOCTYPE HTML>
<html>
    <head>
        <title>图片预览</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <style>
            body{text-align:center}
            #box{wide:720px;margin:0 auto}
            #left{left:20px;}
            #right{right:20px;}
            #repaint{left:20px; top:10px;}
            #hideErrorImg{left:20px; top:40px;}
            .hide{display:none;}
            button{top:70px;position:fixed;z-index:999;background-color:#008CBA;cursor: pointer;border: none;color: white;font-size: 16px;}
        </style>
    </head>
    <body>
        <div id="box">
            <div><img id="0" src="00000.jpg" width="720px" alt="00000.jpg"/></div>
            <div><img id="1" src="00001.jpg" width="720px" alt="00001.jpg"/></div>
        </div>
        <button id="repaint"><span>重新绘图</span></button>
        <button id="hideErrorImg"><span>隐藏加载失败的图片</span></button>
        <button id="left"><span>上一章</span></button>
        <button id="right"><span>下一章</span></button>
    </body>
<script type="text/javascript">
// 格式化数字
function formatInt(i){
    if(i < 10){
        return "0000" + i;
    }else if(i < 100){
        return "000" + i;
    }else{
        return "00" + i;
    }
}
function loadChapter(index){
    chapter = chapters[index];
    document.title = chapter;
    for (i = 0; i < numPic; i++) {
        var img = document.getElementById(i); // document.querySelector("#" + i)
        img.getAttributeNode("src").value = comicName + "/" + chapter + "/" + formatInt(i+1) + ".jpg";
        if(repaint == 1){
            setOnload(img);
        }
        if(hideErrorImg == 1){
            setOnerror(img);
        }
    }
}
// 
function setOnload(img){
    img.onload = function(){
        repaintImg(img);
    }
}
function setOnerror(img){
    img.onerror = function(){
        img.className = 'hide';
    }
}
// 重新画图
function repaintImg(img) {
    var canvas;
    if (img.nextElementSibling == null) {
        canvas = document.createElement('canvas');
        img.after(canvas);
    } else {
        canvas = document.getElementById(img.id).nextElementSibling;
    }
    var ctx = canvas.getContext('2d');
    var s_w = img.width;
    var w = img.naturalWidth;
    var h = img.naturalHeight;
    canvas.width = w;
    canvas.height = h;
    if (s_w > img.parentNode.offsetWidth || s_w == 0) {
        s_w = img.parentNode.offsetWidth;
    }
    canvas.style.width = s_w + 'px';
    var num = 10;
    var remainder = parseInt(h % num);
    var copyW = w;
    for (var i = 0; i < num; i++) {
        var copyH = Math.floor(h / num);
        var py = copyH * (i);
        var y = h - (copyH * (i + 1)) - remainder;
        if (i == 0) {
            copyH = copyH + remainder;
        } else {
            py = py + remainder;
        }
        ctx.drawImage(img, 0, y, copyW, copyH, 0, py, copyW, copyH);
    }
    img.className += 'hide';
}

// 获取url参数
function getQueryVariable(variable){
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
           var pair = vars[i].split("=");
           if(pair[0] == variable){return pair[1];}
   }
   return(false);
}
// 设置url参数
function changeURLArg(arg,arg_val){
    var url = window.location.href;
    var pattern=arg+'=([^&]*)';
    var replaceText=arg+'='+arg_val;
    if(url.match(pattern)){
        var tmp='/('+ arg+'=)([^&]*)/gi';
        tmp=url.replace(eval(tmp),replaceText);
        return tmp;
    }else{
        if(url.match('[\?]')){
            return url+'&'+replaceText;
        }else{
            return url+'?'+replaceText;
        }
    }
}

/* 代码*/
var comicName = "文件夹名称";
var chapters = [
'第1話_',
'第2話_',
'第3話_END'
]

var numPic = 150;
var index = getQueryVariable("p");
var repaint = getQueryVariable("re");
var hideErrorImg = getQueryVariable("hide");
var total = getQueryVariable("total");
if(total){
    numPic = parseInt(total);
}

// 初始化div
var box = document.getElementById("box");
html = "";
for (i = 0; i < numPic; i++) {
    num = formatInt(i+1);
    src = num + ".jpg";
    div = '<div><img id="' + i +'" src="' + src +'" width="720px" alt="' + src +'"/></div>';
    html += div;
}
box.innerHTML = html;

if(!index){
    index = 0;
    window.location.href = changeURLArg("p", 0);
}else{
    loadChapter(index);
}
var btnLeft = document.getElementById("left");
btnLeft.onclick = function(){
    window.location.href = changeURLArg("p", parseInt(index)-1);
}
var btnRight = document.getElementById("right");
btnRight.onclick = function(){
    window.location.href = changeURLArg("p", parseInt(index)+1);
}
var btnHideErrorImg = document.getElementById("hideErrorImg");
btnHideErrorImg.onclick = function(){
    if(hideErrorImg == 1){
        window.location.href = changeURLArg("hide", 0);
    }else{
        window.location.href = changeURLArg("hide", 1);
    }
}
var btnRepaint = document.getElementById("repaint");
btnRepaint.onclick = function(){
    if(repaint == 1){
        window.location.href = changeURLArg("re", 0);
    }else{
        window.location.href = changeURLArg("re", 1);
    }
}
</script>
</html>

相似文章

内容
隐藏