<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>canvas裁剪图片,纯前端</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div>
<input type="file" id="imgFile"></div>
<div style=" 300px;height: 300px;position: absolute;left: 300px;top:40px;display: inline-block">
<img id="demoImg" style="height: 300px; 300px" alt="">
<div style=" 150px;height: 150px;border: 1px solid #4fb8e3;position: absolute;left: 0;top: 0;z-index: 1000" id="chooseBox"></div>
</div>
<div style="position: absolute;left: 700px;top: 0">
<canvas id="myCan" width="150" height="150"></canvas>
<button id="cut">裁剪文件</button>
<button id="btn">后台返回获取裁剪后的文件</button>
<img id="returnImg" alt=""></div>
</body>
<script>
window.onload = function() {
var can = document.getElementById("myCan");
var btn = document.getElementById("btn");
var returnImg = document.getElementById("returnImg");
var ctx = can.getContext("2d");
$('#imgFile').change(function() {
var file = $('#imgFile')[0].files[0];
if (!/image/w+/.test(file.type)) { //判断获取的是否为图片文件
alert("请确保文件为图像文件");
return false;
}
var reader = new FileReader();
reader.onload = function(e) {
$('#demoImg').attr('src', e.target.result);
};
reader.readAsDataURL(file);
});
$('#chooseBox').mousedown(function(e) {
var originX = e.offsetX;
var originY = e.offsetY;
window.onmousemove = function(e) {
$('#chooseBox').css({
position: 'absolute',
left: e.clientX - originX - 300 + 'px',
top: e.clientY - originY + 'px'
});
if ($('#chooseBox').position().left <= 0) {
$('#chooseBox').css({
left: 0
});
}
if ($('#chooseBox').position().left >= 150) {
$('#chooseBox').css({
left: '149px'
});
}
if ($('#chooseBox').position().top <= 0) {
$('#chooseBox').css({
top: 0
});
}
if ($('#chooseBox').position().top >= 150) {
$('#chooseBox').css({
top: '149px'
});
}
$('#chooseBox').mouseout(function() {
window.onmousemove = null;
return
})
};
window.onmouseup = function() {
window.onmousemove = null;
return
}
});
$('#cut').click(function() {
var newX = $('#chooseBox').position().left * 3.45;
var newY = $('#chooseBox').position().top * 2.6;
var img = document.getElementById("demoImg");
console.log(newX, newY);
ctx.drawImage(img, newX, newY, 150 * 3.45, 150 * 2.6, 0, 0, 150, 150);
});
btn.onclick = function() {
var data = can.toDataURL();
data = data.split(',')[1];
data = window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
}
var blob = new Blob([ia], {
type: "image/png",
endings: 'transparent'
});
var fd = new FormData();
console.log(blob);
fd.append('avatarFile', blob, 'image.png');
var httprequest = new XMLHttpRequest();
httprequest.open('POST', '/guest/avatar', true);
httprequest.send(fd);
httprequest.onreadystatechange = function() {
if (httprequest.status == 200 && httprequest.readyState == 4) {
console.log(httprequest.responseText);
$('#returnImg').attr('src', '/images/' + JSON.parse(httprequest.responseText).json);
}
};
};
}
</script></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>通过filereader接口读取文件</title>
<style>
img { 100%; }
</style>
</head>
<body>
<p>
<label>请选择一个文件：</label>
<input type="file" id="imagefile" />
</p>
<div name="result" id="result"></div>
</body>
<script>
function readAsDataURL() {
var myFile = document.getElementById("imagefile");
if (typeof FileReader == 'undifined') //判断浏览器是否支持filereader
{
result.innerHTML = "<p>抱歉，你的浏览器不支持 FileReader</p>";
return false;
}
myFile.onchange = function() {
var file = myFile.files[0];
console.log(file.type);
if (!/image/w+/.test(file.type)) //判断获取的是否为图片文件
{
alert("请确保文件为图像文件");
return false;
}
var reader = new FileReader();
reader.onload = function(e) {
var result = document.getElementById("result");
result.innerHTML = '<img src="' + this.result + '" alt=""/>'
}
reader.readAsDataURL(file);
}
}
window.onload = readAsDataURL;
</script>
</html>