XZ

Xiao Z's blog

Learn, build, share

Integrating ImgURL Image Hosting into Your Website

imgurl integrationimgurl scriptimage hostingwebsite uploadxiaoz imgurl
Published·Modified·

ImgURL is an open-source image hosting program developed by xiaoz. It is simple to install and powerful in function, making it ideal for personal self-hosting. If you are not yet clear on what features ImgURL offers, you can first read An article to understand ImgURL image hosting features.

At the same time, xiaoz has also written a related JavaScript script that can easily integrate the ImgURL image hosting service into your website, allowing you to upload images directly to the ImgURL service from the current page (your website).

Operation Method

Add the following JavaScript code before the </body> tag at the bottom of your webpage. If you have deployed ImgURL yourself, 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
    //$("#layer").css({"top":layertop,"left":layerleft});
    // Native JS change CSS
    //alert(layertop);
    document.getElementById("layer").style.top = layertop;
    document.getElementById("layer").style.left = "10%";
}
// Create a mask layer
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>';
    //$("body").append(fade);
    var div = document.createElement("div");
    div.innerHTML = fade;
	document.body.appendChild(div);
}

// Close the layer
window.closelayer = function(){
    //$("#layer").hide();
    document.getElementById("layer").style.display = "none";
	//showSidebar();
	//$("#layer").remove();
	var layer = document.getElementById("layer");
	layer.parentNode.removeChild(layer);
	
	//$("#fade").remove();
	var fade = document.getElementById("fade");
	fade.parentNode.removeChild(fade);
}

// Create a display button
function imgurl(){
    //$("body").append('<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>');
    // Use native JS to add button
    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 upload button
window.showImgurl = function(){
    var up = layerstart;
    up += '<iframe src = "' + imgurl_domain + '" width="100%" height="660px" frameborder="0"></iframe>';
    up += layerend;
    //$("body").append(up);
    var div = document.createElement("div");
    div.innerHTML = up;
	document.body.appendChild(div);
	
    //$("#layer").show();
    document.getElementById("layer").style.display = "block";
    
    // Show mask
    keepout();
    // Center the layer
    layerCenter();
}

imgurl();
</script>

Alternatively, load an external .js file. Simply copy the code below and add it before </body> on your website. You can choose either method.

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

Usage Method

After the script is added successfully, an "Image Button" will appear in the bottom right corner of the webpage. Click the button to upload images to the ImgURL image hosting service.

Other ImgURL Extensions

Others