<head>
<link rel="stylesheet" href="../../css/typography.css">
<link rel="stylesheet" href="../../css/variables.css">
<link rel="stylesheet" href="../../css/inputs.css">
<link rel="stylesheet" href="../../css/button.css">
<link rel="stylesheet" href="../../css/callouts.css">
<link rel="stylesheet" href="../../css/switch.css">
<link rel="stylesheet" href="../../css/system.css">
<style>
article img {
object-fit: cover;
object-position: var(--focus-x) var(--focus-y);
aspect-ratio: var(--aspect-ratio);
cursor: pointer;
}
.homepage-hero {
--aspect-ratio: 16 / 9;
}
.blog-list-item {
--aspect-ratio: 1 / 1;
}
.circle.blog-list-item {
border-radius: 50%;
overflow: hidden;
}
.blog-post {
--aspect-ratio: 3 / 4;
}
.homepage-hero {
--aspect-ratio: 6 / 2;
}
/* Some setup CSS for the demo */
body {
display: grid;
grid-template-columns: 1fr 3fr;
place-content: center;
padding: 1rem;
gap: 0.5rem 2rem;
grid-auto-flow: dense;
}
img {
display: block;
max-width: 100%;
width: 100%;
}
.source {
position: relative;
cursor: move;
width: 100%;
border: 4px solid #582C83;
height: fit-content;
}
.source-image {
filter: grayscale(100%);
}
.source:before {
font-family: sans-serif;
font-size: .75rem;
position: absolute;
top: 0;
left: 0;
font-weight: bolder;
content: "source";
text-transform: uppercase;
pointer-events: none;
color: #582C83;
background: white;
padding: 0.5em 1.5em;
z-index: 2;
}
.source-focal-point {
--focal-point-size: 10px;
position: absolute;
z-index: 1;
top: calc(var(--focus-y) - (var(--focal-point-size) / 2));
left: calc(var(--focus-x) - (var(--focal-point-size) / 2));
width: var(--focal-point-size);
aspect-ratio: 1 / 1;
border-radius: 100%;
background-color: #582C83;
filter: drop-shadow(1px 1px 4px #fff);
}
span {
font-size: 0.8em;
line-height: 1;
}
</style>
</head>
<body>
<h1 style="grid-column: 1/-1;">Cropping Tool</h1>
<div style="grid-column: 1;">
<p>Use the source image on the left to pick the focal point of the image. Taping any of the cropped images will download them.<br><input type="file" id="sourceImage" onchange="onFileSelected(event)"></p>
<div class="source">
<img class="source-image" src="/img/plansponser.jpg" />
<div class="source-focal-point"></div>
</div>
</div>
<div style="display:flex;gap:1em;flex-wrap:wrap;">
<h2 style="width:100%;margin:0;">Email Sizes</h2>
<div>
<span>Hero size<br><small>(600x200px)</small></span>
<article class="homepage-hero" onclick="convertImage(this,'email-cover')" style="width:600px;height:200px;">
<img src="/img/plansponser.jpg" />
</article>
</div>
<div>
<span>Half-Width<br><small>(300x300px)</small></span>
<article class="blog-list-item" style="width:300px;height:300px;" onclick="convertImage(this,'half-width-email')">
<img src="/img/plansponser.jpg" />
</article>
</div>
<div>
<span>Icon size<br><small>(100x100px)</small></span>
<article class="blog-list-item" style="width:100px;height:100px;" onclick="convertImage(this,'icon-size')">
<img src="/img/plansponser.jpg" />
</article>
</div>
<div>
<span>Circle <br><small>(100x100px)</small></span>
<article class="circle blog-list-item" style="width:100px;height:100px;" onclick="convertPNG(this,'circle')">
<img src="/img/plansponser.jpg" />
</article>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
<script>
var sourceImage = document.querySelector(".source-image");
sourceImage.addEventListener("click", (event) => {
const rect = event.target.getBoundingClientRect();
const xCoord = event.clientX - rect.left;
const yCoord = event.clientY - rect.top;
const xAsPercentage = (xCoord / rect.width) * 100;
const yAsPercentage = (yCoord / rect.height) * 100;
document.documentElement.style.setProperty("--focus-x", `${xAsPercentage}%`);
document.documentElement.style.setProperty("--focus-y", `${yAsPercentage}%`);
});
function onFileSelected(event) {
var selectedFile = event.target.files[0];
var reader = new FileReader();
var imgs = document.querySelectorAll("article img");
reader.onload = function(event) {
sourceImage.src = event.target.result;
imgs.forEach((element) => element.src = event.target.result);
};
reader.readAsDataURL(selectedFile);
}
function convertImage(event, name) {
domtoimage.toJpeg(event, {
quality: 0.95
})
.then(function(dataUrl) {
var filename = name + '.jpg';
window.saveAs(dataUrl, filename);
//var link = document.getElementById('download');
//link.download = name + '.jpg';
//link.href = dataUrl;
});
}
function convertPNG(event, name) {
domtoimage.toPng(event, {
quality: 0.95
})
.then(function(dataUrl) {
var filename = name + '.png';
window.saveAs(dataUrl, filename);
//var link = document.getElementById('download');
//link.download = name + '.jpg';
//link.href = dataUrl;
});
}
</script>
</html>
No notes defined.