michi.vonah/click-guide
1
0
Fork 0
mirror of https://github.com/michivonah/click-guide.git synced 2025-12-22 22:16:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve screenshot centering & quality #3

Browse source
This commit is contained in:
Michi 2024-11-13 21:50:32 +01:00
parent 85bc8eaf43
commit e95f5aff56
1 changed files with 22 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

28
chrome/content.js
View file

@ -45,17 +45,33 @@ document.addEventListener('click', function(){
const img = new Image(); const img = new Image();
img.src = response.screenshot; img.src = response.screenshot;
img.onload = () => { img.onload = () => {
const pixelZoom = 350; const pixelPadding = 150;
const dpr = window.devicePixelRatio || 1;
let parentElement = element.parentNode.parentNode || element.parentNode || element;
parentElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
const parentRect = parentElement.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const croppedWidth = Math.min((parentRect.width + pixelPadding) * dpr, viewportWidth * dpr);
const croppedHeight = Math.min((parentRect.height + pixelPadding) * dpr, viewportHeight * dpr);
const viewportX = Math.max((parentRect.left - pixelPadding / 2) * dpr, 0);
const viewportY = Math.max((parentRect.top - pixelPadding / 2) * dpr, 0);
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.width = rect.width + pixelZoom;
canvas.height = rect.height + pixelZoom;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
canvas.width = croppedWidth;
canvas.height = croppedHeight;
ctx.drawImage( ctx.drawImage(
img, img,
rect.left, rect.top, rect.width + pixelZoom, rect.height + pixelZoom, // source size viewportX, viewportY, croppedWidth, croppedHeight,
0, 0, rect.width + pixelZoom, rect.height + pixelZoom // result size 0, 0, croppedWidth, croppedHeight
); );
const croppedDataUrl = canvas.toDataURL("image/jpeg"); const croppedDataUrl = canvas.toDataURL("image/jpeg");