jonasled2/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

create ednpoint to reduce image size with imgproxy

Browse source
This commit is contained in:
Jonas Leder 2022-05-01 12:45:06 +02:00
parent ccb5af6c8e
commit f140d1e271
No known key found for this signature in database
GPG key ID: CC3C488E27DFF5CA
4 changed files with 53 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
js/customElements/image.js Normal file
View 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)

1
js/script.js
View file

@ -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
View 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;
}

8
public/API/queries/queries.php
View file

@ -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"]),
]
]