create ednpoint to reduce image size with imgproxy
This commit is contained in:
parent
ccb5af6c8e
commit
f140d1e271
4 changed files with 53 additions and 0 deletions
34
js/customElements/image.js
Normal file
34
js/customElements/image.js
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
class CustomImage extends HTMLElement {
|
||||||
|
async connectedCallback(){
|
||||||
|
const originalURL = new URL(this.getAttribute("src"), document.baseURI).href;
|
||||||
|
|
||||||
|
|
||||||
|
var graphql = JSON.stringify({
|
||||||
|
query: "query($url: String) {imgproxy(url: $url)}",
|
||||||
|
variables: {
|
||||||
|
"url": originalURL
|
||||||
|
}
|
||||||
|
})
|
||||||
|
var requestOptions = {
|
||||||
|
method: 'POST',
|
||||||
|
body: graphql,
|
||||||
|
headers: { 'Content-Type': 'application/json' }
|
||||||
|
};
|
||||||
|
|
||||||
|
let imgproxy = (await (await fetch("/API/graphql.php", requestOptions)).json()).data.imgproxy;
|
||||||
|
|
||||||
|
let image = document.createElement("img");
|
||||||
|
image.src = imgproxy;
|
||||||
|
image.setAttribute("alt", this.getAttribute("alt"));
|
||||||
|
image.setAttribute("title", this.getAttribute("title"));
|
||||||
|
image.setAttribute("class", this.getAttribute("class"));
|
||||||
|
image.setAttribute("style", this.getAttribute("style"));
|
||||||
|
image.setAttribute("width", this.getAttribute("width"));
|
||||||
|
image.setAttribute("height", this.getAttribute("height"));
|
||||||
|
image.setAttribute("loading", "lazy");
|
||||||
|
image.setAttribute("original-src", originalURL);
|
||||||
|
this.appendChild(image);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("jl-img", CustomImage)
|
|
@ -20,3 +20,4 @@ require("./customElements/skills");
|
||||||
require("./customElements/pwgen");
|
require("./customElements/pwgen");
|
||||||
require("./customElements/inline-code");
|
require("./customElements/inline-code");
|
||||||
require("./customElements/404Buttons");
|
require("./customElements/404Buttons");
|
||||||
|
require("./customElements/image");
|
10
public/API/queries/imgproxy.php
Normal file
10
public/API/queries/imgproxy.php
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
function imgproxy($imageURL) {
|
||||||
|
require "./lib/config.php";
|
||||||
|
$encodedUrl = rtrim(strtr(base64_encode($imageURL), '+/', '-_'), '=');
|
||||||
|
$path = "/rs:fit:0:120:1/g:no/{$encodedUrl}.webp";
|
||||||
|
|
||||||
|
$signature = rtrim(strtr(base64_encode(hash_hmac('sha256', $imgProxySalt.$path, $imgProxyKey, true)), '+/', '-_'), '=');
|
||||||
|
return $imgProxyUrl . "/" . $signature . $path;
|
||||||
|
}
|
|
@ -7,6 +7,7 @@ require "./queries/blogPost.php";
|
||||||
require "./queries/comments.php";
|
require "./queries/comments.php";
|
||||||
require "./queries/mailAddress.php";
|
require "./queries/mailAddress.php";
|
||||||
require "./queries/ebayKleinanzeigen.php";
|
require "./queries/ebayKleinanzeigen.php";
|
||||||
|
require "./queries/imgproxy.php";
|
||||||
|
|
||||||
|
|
||||||
$queryType = new ObjectType([
|
$queryType = new ObjectType([
|
||||||
|
@ -62,6 +63,13 @@ $queryType = new ObjectType([
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
'resolve' => fn ($rootValue, $args) => ebayKleinanzeigen($args["imageCount"]),
|
'resolve' => fn ($rootValue, $args) => ebayKleinanzeigen($args["imageCount"]),
|
||||||
|
],
|
||||||
|
'imgproxy' => [
|
||||||
|
"type" => Type::string(),
|
||||||
|
"args" => [
|
||||||
|
"url" => Type::nonNull(Type::string()),
|
||||||
|
],
|
||||||
|
'resolve' => fn ($rootValue, $args) => imgproxy($args["url"]),
|
||||||
]
|
]
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in a new issue