Skip to content
Snippets Groups Projects
Verified Commit f140d1e2 authored by Jonas Leder's avatar Jonas Leder
Browse files

create ednpoint to reduce image size with imgproxy

parent ccb5af6c
No related branches found
No related tags found
No related merge requests found
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)
\ No newline at end of file
......@@ -20,3 +20,4 @@ require("./customElements/skills");
require("./customElements/pwgen");
require("./customElements/inline-code");
require("./customElements/404Buttons");
require("./customElements/image");
\ No newline at end of file
<?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"]),
]
]
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment