ImgURL is an open-source image hosting program developed by xiaoz. It is easy to install and has powerful features, making it ideal for personal use. If you are not familiar with the features of ImgURL, you can learn more about them in the article "A Guide to the Special Features of ImgURL Image Hosting".

At the same time, xiaoz has also written related JavaScript scripts that allow you to easily integrate ImgURL into your website, enabling you to upload images directly to ImgURL from the current page (your website).

Instructions

To integrate ImgURL into your website, simply add the following JavaScript code before the </body> tag. If you are using a self-deployed ImgURL image hosting service, please change imgurl_domain to your own domain:

<script type="text/javascript">
imgurl_domain = 'https://imgurl.org/';
// Define a global popup layer
window.layerstart = '<div id="layer" style="box-shadow: 1px 1px 2px #888888;border-radius:5px;top:0em;left:0;width:80%;height:720px;background-color:#FFFFFF;position:fixed;z-index:999;display:none;border:1px solid #d2d2d2">';
layerstart += '<div style="text-align:right;padding:0.8em;border-bottom:1px solid #d2d2d2;"><a href="javascript:;" onclick="closelayer()" style="color:#FFFFFF;background-color:#FF5722;width:80px;text-align:center;padding:0.5em;border-radius:2px;padding-left:1em;padding-right:1em;">Close</a></div>';
window.layerend = '</div>';

// Center the layer
window.layerCenter = function(){
    var bwidth = window.screen.availWidth;
    var bheight = window.screen.availHeight;
    var layertop = (bheight - 720) / 2;
    var layerleft = (bwidth - 1280) / 2;

    if(layertop <= 70){
        layertop = "1em";
    }
    else{
        layertop = layertop + "px";
    }

    // Change CSS
    document.getElementById("layer").style.top = layertop;
    document.getElementById("layer").style.left = "10%";
}

// Create an overlay
window.keepout = function(){
    var fade = '<div id="fade" style="width:100%;height:100%;background:rgba(0, 0, 0, 0.5);position:fixed;left:0;top:0;z-index:99;" onclick="closelayer()"></div>';
    var div = document.createElement("div");
    div.innerHTML = fade;
    document.body.appendChild(div);
}

// Close the layer
window.closelayer = function(){
    document.getElementById("layer").style.display = "none";
    var layer = document.getElementById("layer");
    layer.parentNode.removeChild(layer);

    var fade = document.getElementById("fade");
    fade.parentNode.removeChild(fade);
}

// Create a display button
function imgurl(){
    var div = document.createElement("div");
    div.innerHTML = '<div id="imgbtn" style="position:fixed;right:1em;bottom:1em;z-index:88;cursor:pointer;" onclick="showImgurl()"><img src="https://libs.xiaoz.top/material/image.png" width="36px" height="36px" /></div>';
    document.body.appendChild(div);
}

// Show the upload button
window.showImgurl = function(){
    var up = layerstart;
    up += '<iframe src="' + imgurl_domain + '" width="100%" height="660px" frameborder="0"></iframe>';
    up += layerend;
    var div = document.createElement("div");
    div.innerHTML = up;
    document.body.appendChild(div);

    document.getElementById("layer").style.display = "block";

    keepout();
    layerCenter();
}

imgurl();
</script>

Alternatively, you can load the external .js file by copying the following code and adding it before the </body> tag on your website:

<script src="//libs.xiaoz.top/assets/imgurl_ext.js"></script>

Usage

After successfully adding the script, a "image button" will appear in the bottom right corner of your website. Clicking the button will allow you to upload images to ImgURL.

Other ImgURL Extensions

• Upload Images to ImgURL from any website using Tampermonkey script
• Upload Images to ImgURL using the ImgURL Single Page Version

Others

• ImgURL Source Code: https://github.com/helloxz/imgurl
• Documentation: https://dwz.ovh/imgurldoc (A must-read)