Skip to content

Commit

Permalink
Added a minimal example, removed GA
Browse files Browse the repository at this point in the history
  • Loading branch information
@jwagner
jwagner committed Jul 10, 2022
1 parent 621b4d6 commit de2d143
Show file tree
Hide file tree
Showing 4 changed files with 185 additions and 205 deletions.
51 changes: 51 additions & 0 deletions examples/minimal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>

<head>
<title>Minimal Smartcrop Example</title>
<style>
img {
width: 320px;
}
</style>
</head>

<body>
<script src="../smartcrop.js"></script>
<script>
function loadImage(src) {
return new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => resolve(image);
image.onerror = e => reject(new Error(e));
image.src = src;
});
}
async function main() {
const src = 'images/unsplash/makhmutova-dina-1580313-unsplash.jpg';
const options = {
width: 100,
height: 100
};
const image = await loadImage(src);
const crops = await smartcrop.crop(image, options);
console.log('crops', crops);
showCroppedImage(src, crops.topCrop, options)
}
function showCroppedImage(src, crop, options) {
const div = document.createElement('div');
const style = div.style;
style.backgroundImage = `url('${src}')`;
const scale = options.width / crop.width;
style.backgroundPositionX = crop.x * scale + 'px';
style.backgroundPositionY = -crop.y * scale + 'px';
style.backgroundSize = '100%';
style.width = options.width + 'px';
style.height = options.height + 'px';
document.body.appendChild(div);
}
main();
</script>
</body>

</html>
81 changes: 36 additions & 45 deletions examples/slideshow.html
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,40 @@
<!DOCTYPE html>
<html class="dark">
<head>
<meta charset="utf-8" />
<title>smartcrop.js slideshow</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
property="og:image"
content="http://29a.ch/sandbox/2014/smartcrop/examples/images/slideshow/0.jpg"
/>
</head>

<body>
<h1>smartcrop.js slideshow</h1>
<p>
<a href="https://github.com/jwagner/smartcrop.js">smartcrop.js</a> is a
content aware image cropping library. On this page you can see how it can
be used to automatically pick crops to create a
<a href="http://en.wikipedia.org/wiki/Ken_Burns_effect">Ken Burns</a>
effect on images.
</p>
<p>
You can learn more about smartcrop.js on its
<a href="https://github.com/jwagner/smartcrop.js/">github page</a>.
</p>
<head>
<meta charset="utf-8" />
<title>smartcrop.js slideshow</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:image" content="http://29a.ch/sandbox/2014/smartcrop/examples/images/slideshow/0.jpg" />
</head>

<div id="prev-slide"></div>
<div id="slide">loading, this can take a little while...</div>
<p>
All the images are my own, you can find them and their license on my
<a href="https://www.flickr.com/photos/80225884@N06/">flickr stream</a>.
</p>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="q.js"></script>
<script src="../smartcrop.js"></script>
<script src="slideshow.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5205069-2']);
_gaq.push(['_setDomainName', '29a.ch']);
_gaq.push(['_setSiteSpeedSampleRate', 50]);
_gaq.push(['_gat._anonymizeIp']);
_gaq.push(['_trackPageview']);
</script>
<script src="//www.google-analytics.com/ga.js" async></script>
</body>
</html>
<body>
<h1>smartcrop.js slideshow</h1>
<p>
<a href="https://github.com/jwagner/smartcrop.js">smartcrop.js</a> is a
content aware image cropping library. On this page you can see how it can
be used to automatically pick crops to create a
<a href="http://en.wikipedia.org/wiki/Ken_Burns_effect">Ken Burns</a>
effect on images.
</p>
<p>
You can learn more about smartcrop.js on its
<a href="https://github.com/jwagner/smartcrop.js/">github page</a>.
</p>

<div id="prev-slide"></div>
<div id="slide">loading, this can take a little while...</div>
<p>
All the images are my own, you can find them and their license on my
<a href="https://www.flickr.com/photos/80225884@N06/">flickr stream</a>.
</p>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="q.js"></script>
<script src="../smartcrop.js"></script>
<script src="slideshow.js"></script>
<script src="/a.js" async></script>
</body>

</html>
224 changes: 81 additions & 143 deletions examples/testbed.html
View file
Original file line number Diff line number Diff line change
@@ -1,152 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>smartcrop.js testbed</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>

<body>
<h1>smartcrop.js testbed</h1>
<p>
smartcrop.js is a content aware image cropping library. On this page you
can test it with your own images. You can learn more about the library on
it's <a href="https://github.com/jwagner/smartcrop.js/">github page</a>.
</p>
<div>
<form>
<div class="drop">
<h2>Drop images on this page to analyze them.</h2>
<input type="file" name="file" accept="image/*" />
</div>
<label
>Width
<div>
<input
name="width"
type="range"
min="50"
max="500"
step="1"
value="250"
/><span class="value">250</span>px
</div></label
>
<label
>Height
<div>
<input
name="height"
type="range"
min="50"
max="500"
step="1"
value="250"
/><span class="value">250</span>px
</div></label
>
<label
>minScale
<div>
<input
name="minScale"
type="range"
min="0.5"
max="1.0"
step="0.1"
value="1"
/><span class="value">1.0</span>
</div></label
>
<p>
<label
>Rule of thirds<input
name="ruleOfThirds"
type="checkbox"
value="1"
checked
/></label>
</p>
<p><strong>Face Detection</strong></p>
<div>
<label
><input
name="faceDetection"
type="radio"
value="off"
checked
/>Off</label
>
</div>
<div>
<label
><input name="faceDetection" type="radio" value="face-api" />Use
<a href="https://github.com/justadudewhohacks/face-api.js"
>face-api.js</a
>
(tiny_face_detector model)
</label>
</div>
<head>
<meta charset="utf-8" />
<title>smartcrop.js testbed</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>

<body>
<h1>smartcrop.js testbed</h1>
<p>
smartcrop.js is a content aware image cropping library. On this page you
can test it with your own images. You can learn more about the library on
it's <a href="https://github.com/jwagner/smartcrop.js/">github page</a>.
</p>
<div>
<form>
<div class="drop">
<h2>Drop images on this page to analyze them.</h2>
<input type="file" name="file" accept="image/*" />
</div>
<label>Width
<div>
<label
><input name="faceDetection" type="radio" value="jquery" />Use
<a href="http://facedetection.jaysalvat.com/"
>jquery.facedetection</a
></label
>
<input name="width" type="range" min="50" max="500" step="1" value="250" /><span class="value">250</span>px
</div>
</label>
<label>Height
<div>
<label
><input name="faceDetection" type="radio" value="tracking" />Use
<a href="https://trackingjs.com/">tracking.js</a></label
>
<input name="height" type="range" min="50" max="500" step="1" value="250" /><span class="value">250</span>px
</div>
</label>
<label>minScale
<div>
<label class="opencv-loading"
><input
name="faceDetection"
type="radio"
value="opencv"
disabled
/>Use <a href="https://opencv.org/">opencv.js</a></label
>
<input name="minScale" type="range" min="0.5" max="1.0" step="0.1" value="1" /><span class="value">1.0</span>
</div>
</form>
</div>
<div class="output">
<canvas id="c"></canvas>
</div>
<div class="sidebar">
<div id="debug"></div>
<h4>All Crops</h4>
<div class="crops"></div>
</div>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="../smartcrop.js"></script>
<script src="smartcrop-debug.js"></script>
<script src="tracking-min.js"></script>
<script src="tracking-face-min.js"></script>
<script src="jquery.facedetection.min.js"></script>
<script src="face-api.min.js"></script>
<script src="testbed.js"></script>
<script
async
src="https://unpkg.com/opencv.js@1.2.1/opencv.js"
integrity="sha384-ucXOxPgA5tSKdaZgFD+5C0lAJeavjW31veENhNvOwsTjgx8waDD0s1QcMdUxhlxk"
crossorigin="anonymous"
onload="openCvReady()"
></script>
<p style="clear:both">Example Photo by Makhmutova Dina on Unsplash</p>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-5205069-2']);
_gaq.push(['_setDomainName', '29a.ch']);
_gaq.push(['_setSiteSpeedSampleRate', 50]);
_gaq.push(['_gat._anonymizeIp']);
_gaq.push(['_trackPageview']);
</script>
<script src="//www.google-analytics.com/ga.js" async></script>
</body>
</html>
</label>
<p>
<label>Rule of thirds<input name="ruleOfThirds" type="checkbox" value="1" checked /></label>
</p>
<p><strong>Face Detection</strong></p>
<div>
<label><input name="faceDetection" type="radio" value="off" checked />Off</label>
</div>
<div>
<label><input name="faceDetection" type="radio" value="face-api" />Use
<a href="https://github.com/justadudewhohacks/face-api.js">face-api.js</a>
(tiny_face_detector model)
</label>
</div>
<div>
<label><input name="faceDetection" type="radio" value="jquery" />Use
<a href="http://facedetection.jaysalvat.com/">jquery.facedetection</a></label>
</div>
<div>
<label><input name="faceDetection" type="radio" value="tracking" />Use
<a href="https://trackingjs.com/">tracking.js</a></label>
</div>
<div>
<label class="opencv-loading"><input name="faceDetection" type="radio" value="opencv" disabled />Use <a
href="https://opencv.org/">opencv.js</a></label>
</div>
</form>
</div>
<div class="output">
<canvas id="c"></canvas>
</div>
<div class="sidebar">
<div id="debug"></div>
<h4>All Crops</h4>
<div class="crops"></div>
</div>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="../smartcrop.js"></script>
<script src="smartcrop-debug.js"></script>
<script src="tracking-min.js"></script>
<script src="tracking-face-min.js"></script>
<script src="jquery.facedetection.min.js"></script>
<script src="face-api.min.js"></script>
<script src="testbed.js"></script>
<script async src="https://unpkg.com/opencv.js@1.2.1/opencv.js"
integrity="sha384-ucXOxPgA5tSKdaZgFD+5C0lAJeavjW31veENhNvOwsTjgx8waDD0s1QcMdUxhlxk" crossorigin="anonymous"
onload="openCvReady()"></script>
<p style="clear:both">Example Photo by Makhmutova Dina on Unsplash</p>
<script src="/a.js" async></script>
</body>

</html>
Loading

0 comments on commit de2d143

Please sign in to comment.