[
  {
    "path": "README.md",
    "content": "# imgur\n基于 **imgur** 的web图片托管页面，即开即用\n\n![img](https://i.imgur.com/9RLDxB7.png)\n\n## 配置 `ClientID`\n在 `https://api.imgur.com/oauth2/addclient` 注册 `clientId`\n\n![img](./image/getlientid.png)\n\n\n```\nconst res = await fetch('https://api.imgur.com/3/upload', {\n    method: 'POST',\n    headers: { Authorization: `Client-ID ${clientId}` },\n    body: formData,\n})\n```\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>imgur</title>\n    <meta name=\"description\" content=\"基于imgur的web图片托管页面\">\n    <meta name=\"keywords\"\n        content=\"imgur,图床,免费图床,在线图床,图片托管,免费图片存储,图片上传网站,图片分享平台,图片存储服务,图片云存储,图片外链,快速图片上传,匿名图床服务,图片托管网站,图片存储工具,图片上传和存储服务,图片托管\">\n\n</head>\n<style>\n    body,\n    html {\n        margin: 0;\n        padding: 0;\n    }\n\n    .forkicon {\n        position: fixed;\n        top: 0px;\n        right: 0px;\n        border: 0px;\n        width: 150px;\n        user-select: none;\n    }\n\n    .main {\n        padding-top: 60px;\n        min-height: 100vh;\n        box-sizing: border-box;\n        font-family: Avenir, Helvetica, Arial, sans-serif;\n    }\n\n    .upload-demo {\n        text-align: center;\n    }\n\n    .upload-demo .info {\n        display: inline-block;\n        text-align: center;\n        cursor: pointer;\n        outline: 0;\n    }\n\n    .upload {\n        background-color: #fff;\n        border: 1px dashed #d9d9d9;\n        border-radius: 6px;\n        box-sizing: border-box;\n        width: 360px;\n        height: 180px;\n        text-align: center;\n        position: relative;\n        overflow: hidden;\n    }\n\n    .upload.highlight {\n        background-color: rgba(32, 159, 255, .06);\n        border: 2px dashed #409eff;\n    }\n\n    .upload:hover {\n        border-color: #409eff;\n    }\n\n    .upinp {\n        display: none;\n    }\n\n    .upload-info .text {\n        color: #606266;\n        font-size: 14px;\n        text-align: center;\n    }\n\n    .upload-info .text em {\n        color: #409eff;\n        font-style: normal;\n    }\n\n    .upload-info .icon svg {\n        color: #c0c4cc;\n        margin: 40px 0 16px;\n        line-height: 50px;\n    }\n\n    .line {\n        display: block;\n        height: 1px;\n        width: 100%;\n        margin: 24px 0;\n        background-color: #dcdfe6;\n        position: relative;\n    }\n\n    .res-info {\n        text-align: center;\n    }\n\n    .res-link {\n        font-size: 20px;\n        padding-bottom: 20px\n    }\n\n    .footer {\n        position: fixed;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        text-align: center;\n        color: #c0c4cc;\n        font-size: 16px;\n    }\n\n    .footer span {\n        cursor: pointer;\n    }\n\n    .loading {\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        background: #1413136b;\n        display: grid;\n        place-items: center;\n        display: none;\n    }\n\n    .loading svg {\n        width: 30px;\n        animation: rotateAnimation 2s infinite linear;\n    }\n\n    @keyframes rotateAnimation {\n        from {\n            transform: rotate(0deg);\n        }\n\n        to {\n            transform: rotate(360deg);\n        }\n    }\n</style>\n\n<body>\n    <a target=\"_blank\" href=\"https://github.com/WishMelz/imgur\">\n        <img class=\"forkicon\"\n            src=\"https://cdn.jsdelivr.net/gh/WishMelz/file@master/messy/614b81962449bb3430193bdd6eaa3c7f.png\" alt=\"\">\n    </a>\n    <div class=\"main\">\n        <div class=\"footer\">\n            <span><a style=\"color:#606266;\" href=\"https://github.com/WishMelz/imgur\">基于 imgur 的web程序</a></span>\n            <!-- <span>|</span>\n            <span>历史记录</span> -->\n        </div>\n        <div class=\"upload-demo\">\n            <div class=\"info\">\n                <div class=\"upload\">\n                    <div class=\"upload-info\">\n                        <div class=\"icon\">\n                            <svg t=\"1692252618256\" viewBox=\"0 0 1024 1024\" version=\"1.1\"\n                                xmlns=\"http://www.w3.org/2000/svg\" p-id=\"18739\" width=\"60\" height=\"60\">\n                                <path\n                                    d=\"M768.114773 384c0-140.8-115.2-256-256-256S256.114773 243.2 256.114773 384c-145.066667 0-260.266667 119.466667-256 264.533333 4.266667 140.8 128 247.466667 268.8 247.466667H384.114773c25.6 0 42.666667-17.066667 42.666667-42.666667v-128H375.58144c-38.4 0-55.466667-46.933333-29.866667-72.533333l136.533334-136.533333c17.066667-17.066667 42.666667-17.066667 59.733333 0l136.533333 136.533333c25.6 25.6 8.533333 72.533333-29.866666 72.533333H597.448107v128c0 25.6 17.066667 42.666667 42.666666 42.666667h115.2c140.8 0 264.533333-106.666667 264.533334-247.466667 8.533333-145.066667-106.666667-264.533333-251.733334-264.533333z\"\n                                    p-id=\"18740\" fill=\"#c0c4cc\"></path>\n                            </svg>\n                        </div>\n                        <div class=\"text\">将文件拖到此处，或 <em>点击上传</em> </div>\n                        <div class=\"text\"><b>支持 ctrl + v 上传</b></div>\n                    </div>\n                    <input type=\"file\" class=\"upinp\" name=\"file\" multiple>\n                </div>\n            </div>\n        </div>\n        <div class=\"line\"></div>\n        <div class=\"resmain\">\n            <div class=\"res-info\">\n                <div class=\"res-link\">\n                    <b id=\"resurl\">https://i.imgur.com/nGI3Js1.png</b>\n                </div>\n                <div class=\"res-img\">\n                    <img id=\"resimg\" src=\"https://i.imgur.com/nGI3Js1.png\" alt=\"\">\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"loading\">\n        <div class=\"info\">\n            <svg t=\"1692859661070\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4043\" width=\"128\" height=\"128\"><path d=\"M511.882596 287.998081h-0.361244a31.998984 31.998984 0 0 1-31.659415-31.977309v-0.361244c0-0.104761 0.115598-11.722364 0.115598-63.658399V96.000564a31.998984 31.998984 0 1 1 64.001581 0V192.001129c0 52.586273-0.111986 63.88237-0.119211 64.337537a32.002596 32.002596 0 0 1-31.977309 31.659415zM511.998194 959.99842a31.998984 31.998984 0 0 1-31.998984-31.998984v-96.379871c0-51.610915-0.111986-63.174332-0.115598-63.286318s0-0.242033 0-0.361243a31.998984 31.998984 0 0 1 63.997968-0.314283c0 0.455167 0.11921 11.711527 0.11921 64.034093v96.307622a31.998984 31.998984 0 0 1-32.002596 31.998984zM330.899406 363.021212a31.897836 31.897836 0 0 1-22.866739-9.612699c-0.075861-0.075861-8.207461-8.370021-44.931515-45.094076L195.198137 240.429485a31.998984 31.998984 0 0 1 45.256635-45.253022L308.336112 263.057803c37.182834 37.182834 45.090463 45.253022 45.41197 45.578141A31.998984 31.998984 0 0 1 330.899406 363.021212zM806.137421 838.11473a31.901448 31.901448 0 0 1-22.628318-9.374279L715.624151 760.859111c-36.724054-36.724054-45.018214-44.859267-45.097687-44.93874a31.998984 31.998984 0 0 1 44.77618-45.729864c0.32512 0.317895 8.395308 8.229136 45.578142 45.411969l67.88134 67.88134a31.998984 31.998984 0 0 1-22.624705 54.630914zM224.000113 838.11473a31.901448 31.901448 0 0 0 22.628317-9.374279l67.88134-67.88134c36.724054-36.724054 45.021826-44.859267 45.097688-44.93874a31.998984 31.998984 0 0 0-44.776181-45.729864c-0.32512 0.317895-8.395308 8.229136-45.578142 45.411969l-67.88134 67.884953a31.998984 31.998984 0 0 0 22.628318 54.627301zM255.948523 544.058589h-0.361244c-0.104761 0-11.722364-0.115598-63.658399-0.115598H95.942765a31.998984 31.998984 0 1 1 0-64.00158h95.996952c52.586273 0 63.88237 0.111986 64.337538 0.11921a31.998984 31.998984 0 0 1 31.659414 31.97731v0.361244a32.002596 32.002596 0 0 1-31.988146 31.659414zM767.939492 544.058589a32.002596 32.002596 0 0 1-31.995372-31.666639v-0.361244a31.998984 31.998984 0 0 1 31.659415-31.970085c0.455167 0 11.754876-0.11921 64.34115-0.11921h96.000564a31.998984 31.998984 0 0 1 0 64.00158H831.944685c-51.936034 0-63.553638 0.111986-63.665624 0.115598h-0.335957zM692.999446 363.0176a31.998984 31.998984 0 0 1-22.863126-54.381656c0.317895-0.32512 8.229136-8.395308 45.41197-45.578141l67.88134-67.884953A31.998984 31.998984 0 1 1 828.693489 240.429485l-67.892177 67.88134c-31.020013 31.023625-41.644196 41.759794-44.241539 44.393262l-0.697201 0.722488a31.908673 31.908673 0 0 1-22.863126 9.591025z\" fill=\"#ffffff\" p-id=\"4044\"></path></svg>\n        </div>\n    </div>\n</body>\n<script>\n    /** \n     * imgur 上传图片的 clientId\n     * 注册应用：https://api.imgur.com/oauth2/addclient\n     * 查看已注册：https://imgur.com/account/settings/apps\n    */\n    const clientId = 'b2e5734394755e0'\n    let uploadInp = document.querySelector('.upinp')\n    let dropzone = document.querySelector('.upload')\n    let loadingDom = document.querySelector('.loading')\n    // 阻止默认的拖放行为\n    dropzone.addEventListener('dragover', function (e) {\n        e.preventDefault()\n        dropzone.classList.add('highlight')\n    })\n    // 拖放结束时移除高亮样式\n    dropzone.addEventListener('dragleave', function (e) {\n        dropzone.classList.remove('highlight')\n    })\n    // 处理拖放事件\n    dropzone.addEventListener('drop', function (e) {\n        e.preventDefault()\n        dropzone.classList.remove('highlight')\n        var files = e.dataTransfer.files\n        handleImage(files)\n    })\n\n    uploadInp.addEventListener('change', function (e) {\n        var file = e.target.files\n        handleImage(file)\n    })\n\n    document.querySelector('.upload').onclick = function () {\n        uploadInp.click()\n    }\n    async function handleImage(file) {\n        let fileOne = file[0]\n        const formData = new FormData()\n        formData.append('image', fileOne)\n        loadingDom.style.display = 'grid'\n        const res = await fetch('https://api.imgur.com/3/upload', {\n            method: 'POST',\n            headers: { Authorization: `Client-ID ${clientId}` },\n            body: formData,\n        })\n        loadingDom.style.display = 'none'\n        if (res.ok) {\n            const resData = await res.json()\n            if (resData.success) {\n                setHistory(resData.data.link)\n            }\n        }\n    }\n\n    function setHistory(url) {\n        document.querySelector('#resurl').innerHTML = url\n        document.querySelector('#resimg').src = url\n        let urlList = localStorage.getItem('historyList')\n        if (urlList) {\n            urlList = JSON.parse(urlList)\n        } else {\n            urlList = []\n        }\n        urlList.push({\n            url,\n            timer: Date.now()\n        })\n        localStorage.setItem('historyList', JSON.stringify(urlList))\n    }\n\n    document.addEventListener(\"paste\", function (event) {\n        var isChrome = false\n        if (event.clipboardData || event.originalEvent) {\n            //某些chrome版本使用的是event.originalEvent\n            var clipboardData =\n                event.clipboardData || event.originalEvent.clipboardData\n            if (clipboardData.items) {\n                // for chrome\n                var items = clipboardData.items,\n                    len = items.length,\n                    blob = null\n                isChrome = true\n                for (var i = 0; i < len; i++) {\n                    if (items[i].type.indexOf(\"image\") !== -1) {\n                        //getAsFile() 此方法只是living standard firefox ie11 并不支持\n                        blob = items[i].getAsFile()\n                    }\n                }\n                if (blob !== null) {\n                    var reader = new FileReader()\n                    reader.readAsDataURL(blob)\n                    //base64码显示\n                    reader.onload = function (event) {\n                        // event.target.result 即为图片的Base64编码字符串\n                        var base64_str = event.target.result\n                        let blob = dataURLtoBlob(base64_str)\n                        let file = blobToFile(blob, Date.now() + \".png\")\n                        handleImage([file])\n                    }\n                }\n            }\n        }\n    })\n\n    function dataURLtoBlob(dataurl) {\n        var arr = dataurl.split(\",\"),\n            mime = arr[0].match(/:(.*?);/)[1],\n            bstr = atob(arr[1]),\n            n = bstr.length,\n            u8arr = new Uint8Array(n)\n        while (n--) {\n            u8arr[n] = bstr.charCodeAt(n)\n        }\n        return new Blob([u8arr], { type: mime })\n    }\n    function blobToFile(theBlob, fileName) {\n        theBlob.lastModifiedDate = new Date() // 文件最后的修改日期\n        theBlob.name = fileName // 文件名\n        return new File([theBlob], fileName, {\n            type: theBlob.type,\n            lastModified: Date.now(),\n        })\n    }\n</script>\n\n</html>"
  }
]