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/inline-code");
|
||||
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/mailAddress.php";
|
||||
require "./queries/ebayKleinanzeigen.php";
|
||||
require "./queries/imgproxy.php";
|
||||
|
||||
|
||||
$queryType = new ObjectType([
|
||||
|
@ -62,6 +63,13 @@ $queryType = new ObjectType([
|
|||
]
|
||||
],
|
||||
'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