<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Best quality image Downscaling with Canvas">
<meta name="author" content="Tóth András">
<title>Resize</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="page-header text-center">Best quality image Downscaling with Canvas</h1>
<div class="container" style="width: 100%;">
<div class="row text-center">
<div class="col-sm-12 col-md-4">
<div class="thumbnail">
<div class="well" id="source">
<img width="300" height="450" src="img.jpg">
</div>
<div class="caption">
<h3>Original image</h3>
<p class="text-left">Browser resized</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="thumbnail">
<div class="well" id="normal">
<canvas></canvas>
</div>
<div class="caption">
<h3>Resized canvas</h3>
<p class="text-left">Normal resized</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="thumbnail">
<div class="well" id="target">
</div>
<div class="caption">
<h3>Resized canvas</h3>
<p class="text-left">Resizer resized - level Auto</p>
<hr>
<p><a class="btn btn-primary" role="button" onclick="downloadImage(document.querySelector('#target').querySelector('canvas'), 'down.png', 'image/png');">Download</a></p>
</div>
</div>
</div>
</div>
</div>
<script src="resizer.js"></script>
<script type="text/javascript">
var args = {
source: '#source img', // string (querySelector) or html img element
keepRatio: true, // boolean
height: 450, // int
width: 450, // int
level: 0, // int 0-9
/*
0: AUTO,
1: SHARP_HIGH,
2: SHARP_MEDIUM,
3: SHARP_LOW,
4: OPTIMAL_LOW,
5: OPTIMAL_MEDIUM,
6: OPTIMAL_HIGH,
7: SMOOTH_LOW,
8: SMOOTH_MEDIUM,
9: SMOOTH_HIGH
*/
smoothEnabled: true, // boolean
};
function resultCallBack(res) {
// res.source - source img element
// res.canvas - resized canvas
// res.dataURL - image data
// res.width - resized width
// res.height - resized height
// res.startTime
// res.endTime
var img = document.querySelector('#source img');
img.width = res.width;
img.height = res.height;
document.querySelector('#target').appendChild(res.canvas);
// normal canvas resizeing
var can = document.querySelector('#normal canvas');
can.width = res.width;
can.height = res.height;
var cx = can.getContext("2d");
cx.drawImage(img, 0, 0, res.width, res.height);
};
function downloadImage(item, filename, type, quality) {
item = typeof item === 'string' ? document.querySelector(item) : item;
type = !!type ? type : 'image/png';
quality = !!quality ? quality : 1.0;
var canvas = item;
if (item.tagName.toLowerCase() !== 'canvas') {
canvas = document.createElement('canvas');
canvas.width = item.naturalWidth;
canvas.height = item.naturalHeight;
canvas.getContext('2d').drawImage(item, 0, 0, item.naturalWidth, item.naturalHeight);
}
var a = window.document.createElement('a');
a.href = canvas.toDataURL(type, quality);
a.style.display = 'none';
a.download = filename;
document.querySelector('body').appendChild(a);
a.click();
a && a.parentNode && a.parentNode.removeChild(a);
}
window.onload = function (){
new Resizer().Init(args, resultCallBack);
};
</script>
</body>
</html>
|
Download
