<!DOCTYPE html>
<html>
<head>
<title>Canvas Compressor</title>
<script src="jquery-1.8.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.col {
display: inline-block;
width: 49%;
}
.quality {
width: 120px;
margin-left: 200px;
}
</style>
</head>
<body>
<h1>HTML5图片压缩旋转调整</h1>
<input type="file" id="single" />
<button onclick="rotateImg('source', 'left')">向左旋转</button>
<button onclick="rotateImg('source', 'right')">向右旋转</button>
<button onclick="alert(dataUrl)">上传</button>
<div id="container">
<div class="col">
<h3>
Origin:
<span id="detail"></span>
</h3>
<canvas id="canvas"></canvas>
<canvas id="pic_source" style="display:none"></canvas>
</div>
<img id="source" src="" style="display:none">
<img id="preview" src="">
</div>
<script>
var canvas = document.getElementById('canvas');
var source = document.getElementById('source');
var preview = document.getElementById('preview');
var dataUrl;//图片压缩后路径
var qualityLevel = 0.8;
$(function () {
$('#single').on('change', function (e) {
var img = e.target.files[0]
var reader = new FileReader();
reader.readAsDataURL(img);
reader.onload = function (e) { // reader onload start
var url = reader.result;
source.src = url;
} // reader onload end
reader.readAsDataURL(img);
})
})
source.onload = function () {
var width = source.width;
var height = source.height;
var context = canvas.getContext('2d');
var newwidth = 800;
var newheight = 1000;
canvas.width = newwidth;
canvas.height = newheight;
//当宽度和高度都小于设置值
if (width <= newwidth && height <= newheight) {
newwidth = width;
newheight = height;
}
//当宽度小于设置值高度大于设置值按高度比例调整
if (width <= newwidth && height > newheight) {
newwidth = newheight / height * width;
}
//当宽度大于设置值高度小于设置值案宽度比例调整
if (width > newwidth && height <= newheight) {
newheight = newwidth / width * height;
}
//当宽度和高度都大于设置值
if (width > newwidth && height > newheight) {
var bla = newwidth / width;
var blb = newheight / height;
if (bla > blb) {
newwidth = width * blb;
newheight = height * blb
}
else {
newwidth = width * bla;
newheight = height * bla;
}
}
var sx = 0;
var sy = 0;
var sWidth = width;
var sHeight = height;
var dx = 0;
var dy = 0;
var dWidth = newwidth;
var dHeight = newheight;
$("#detail").html("W:" + sWidth + " H:" + sHeight)
context.drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
dataUrl = canvas.toDataURL('image/jpeg', qualityLevel);
//preview.src = dataUrl;
};
function compress(pid) {
var source = document.getElementById("pic_" + pid);
var width = source.width;
var height = source.height;
var context = canvas.getContext('2d');
var newwidth = 800;
var newheight = 1000;
canvas.width = newwidth;
canvas.height = newheight;
//当宽度和高度都小于设置值
if (width <= newwidth && height <= newheight) {
newwidth = width;
newheight = height;
}
//当宽度小于设置值高度大于设置值按高度比例调整
if (width <= newwidth && height > newheight) {
newwidth = newheight / height * width;
}
//当宽度大于设置值高度小于设置值案宽度比例调整
if (width > newwidth && height <= newheight) {
newheight = newwidth / width * height;
}
//当宽度和高度都大于设置值
if (width > newwidth && height > newheight) {
var bla = newwidth / width;
var blb = newheight / height;
if (bla > blb) {
newwidth = width * blb;
newheight = height * blb
}
else {
newwidth = width * bla;
newheight = height * bla;
}
}
var sx = 0;
var sy = 0;
var sWidth = width;
var sHeight = height;
var dx = 0;
var dy = 0;
var dWidth = newwidth;
var dHeight = newheight;
$("#detail").html("W:" + sWidth + " H:" + sHeight)
context.drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
dataUrl = canvas.toDataURL('image/jpeg', qualityLevel);
//preview.src = dataUrl;
}
var quality = document.getElementById('quality');
quality.addEventListener('keydown', function (e) {
if (e.which === 13) {
var value = e.currentTarget.value;
value = value < 1 ? 1 : value;
value = value > 100 ? 100 : value;
qualityLevel = parseFloat(value / 100);
document.getElementById('level').innerText = qualityLevel;
source.onload();
}
}, false);
function rotateImg(pid, direction) {
//最小与最大旋转方向，图片旋转4次后回到原方向
var min_step = 0;
var max_step = 3;
var img = document.getElementById(pid);
if (img == null) return;
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
var height = img.height;
var width = img.width;
var step = img.getAttribute('step');
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋转到原位置，即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
img.setAttribute('step', step);
var canvas = document.getElementById('pic_' + pid);
if (canvas == null) {
img.style.display = 'none';
canvas = document.createElement('canvas');
canvas.setAttribute('id', 'pic_' + pid);
img.parentNode.appendChild(canvas);
}
//旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
compress('source');
}
</script>
<
评论1
最新资源