Skip to content

Instantly share code, notes, and snippets.

@simanacci

simanacci/smartcrop.js

Created July 9, 2022 08:01
Show Gist options
  • Save simanacci/b6736f9cc41135d6b8016fd1d5d672ce to your computer and use it in GitHub Desktop.
Save simanacci/b6736f9cc41135d6b8016fd1d5d672ce to your computer and use it in GitHub Desktop.
Download ZIP
Raw
smartcrop.js
<html>
<body class="container">
<header>
<link href="/static/test.css" rel="stylesheet" type="text/css">
</header>
<main class="main">
<img id="profile-photo" src="https://test.s3.amazonaws.com/profile_photo/test.jpg" alt="Politician Profile Photo" >
</main>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smartcrop/2.0.5/smartcrop.js"></script>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
const image = document.getElementsByTagName("img").item(0);
console.log(image);
console.log(SmartCrop);
if (image.complete) {
image.onload = function () {
SmartCrop.crop(image, { width: 1025, height: 750, minScale: 1.0 }).then(function(result) {
console.log(result);
console.log(result.topCrop);
console.log(result.topCrop.height);
console.log(result.topCrop.width);
image.style.width = result.topCrop.width + "px";
image.style.height = result.topCrop.height + "px";
});
};
}
}, false);
</script>
@simanacci
Copy link
Author

simanacci commented Jul 9, 2022 •
edited
Loading

I've tried the above code but it never gets past the boolean check. Am I supposed to loop through it until it works? This https://stackoverflow.com/questions/72914444/smartcrop-js-how-to-configure-smartcrop-js works but returns a tiny 23px by 17px crop of a 2042px by 1443px photo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment