@ns0m/hermite-resize
Version:
Canvas image resize/resample using Hermite filter with JavaScript.
139 lines (118 loc) • 3.88 kB
HTML
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hermite resize Demo</title>
<style>
canvas{
border:1px solid #cccccc;
/* disable antialiasing */
image-rendering: optimizeSpeed; /* Older versions of FF */
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
image-rendering: pixelated; /* Awesome future-browsers */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
</style>
<script>
//image path
var path = 'nature.jpg';
</script>
<script src="../src/hermite.js"></script>
</head>
<body>
<h2 style="margin: 5px 0px;">Hermite resize Demo</h2>
<a id="source" href="#">Image</a>
<script>
document.getElementById("source").href = path;
</script>
<button onclick="resize(350);">350%</button>
<button onclick="resize(100);">100%</button>
<button onclick="resize(77);">77%</button>
<button onclick="resize(40);">40%</button>
<button onclick="resize(20);">20%</button>
<input id="slider" value="100" min="1" max="100" step="1" oninput="resize(this.value, true);" type="range">
<span style="margin-right:10px;" id="slider_value">-</span>
<label><input type="checkbox" id="workers" value="1"> Use <span id="cores"></span> workers</label>
<span style="margin-left:30px;">
Resized in: <span id="timer" style="font-weight:bold;">-</span> s
</span>
<br /><br />
<b>Canvas:</b><br />
<canvas id="cc"></canvas>
<hr />
<button onclick="HERMITE.resize_image('image_id', 300, 100, document.getElementById('workers').checked);">Resize to 300x100</button>
<button onclick="HERMITE.resize_image('image_id', null, null, 50, document.getElementById('workers').checked);">Resize to 50%</button>
<br />
<b>Image:</b><br />
<img id="image_id" alt="" src="" />
<script>
document.getElementById("image_id").src = path;
</script>
<script>
//globals
var HERMITE = new Hermite_class();
var canvas = document.getElementById("cc");
var ctx = canvas.getContext("2d");
var img_w;
var img_h;
var current_size = false;
var img = new Image();
img.crossOrigin = "Anonymous"; //cors support
img.onload = function(){
draw_image();
var resize_size = 63; //1-100
//resize
resize(resize_size);
setSlider(resize_size);
};
img.src = path;
function draw_image(){
img_w = img.width;
img_h = img.height;
//prepare canvas
canvas.width = img_w;
canvas.height = img_h;
ctx.clearRect(0, 0, img_w, img_h);
//draw image
ctx.drawImage(img, 0, 0);
}
function setSlider(value){
document.getElementById('slider').value = value;
}
function resize(percentages, slider) {
if(slider === true && current_size == percentages){
//stop event from firing twice - firefix bug
return false;
}
current_size = percentages;
document.getElementById('slider_value').innerHTML = percentages+'%';
var use_workers = document.getElementById('workers').checked;
var cores = HERMITE.getCores();
document.getElementById('cores').innerHTML = cores;
var w = Math.round(img_w * percentages / 100);
var h = Math.round(img_h * percentages / 100);
//prepare canvas
canvas.width = img_w;
canvas.height = img_h;
ctx.drawImage(img, 0, 0); //draw image
//start timer
var time1 = Date.now();
var on_finish = function(){
document.getElementById('timer').innerHTML = Math.round(Date.now() - time1)/1000;
};
//resize
if(use_workers){
//multi-cpu version
HERMITE.resample(canvas, w, h, true, on_finish);
}
else{
//1 cpu version
HERMITE.resample_single(canvas, w, h, true);
on_finish();
}
}
</script>
</body>
</html>