1 我们常常需要上传头像，点击上传按钮时候需要预览一下，使用filereader方法无需和后台交互，代码如下：
//本地图片在上传之前的预览效果
//图片上传预览
function previewImage(file)
{
if (file.files && file.files[0])
{
var img = document.getElementById('imghead'); var reader = new FileReader();
//读取file完成之后加载
reader.onload = function(evt){
img.src = evt.target.result;
}
//开始读取file
reader.readAsDataURL(file.files[0]);
} }
2 此时我们已经可以进行预览，然后往往我们需要在线剪切一下图片，鼠标可以在图片上画出自定义大小的方框，代码如下：
// startX, startY 为鼠标点击时初始坐标
// diffX, diffY 为鼠标初始坐标与 box 左上角坐标之差，用于拖动
var startX, startY, diffX, diffY; // 是否拖动，初始为 false
var dragging = false;
//window.onload=function(e) {
//e = e || window.event; //是否存在方框
var existbox = false; // 鼠标按下
document.onmousedown = function(e) { startX = e.pageX;
startY = e.pageY; if(isimg(startX,startY)!==true){
return false;
} // 如果鼠标在 box 上被按下
if(e.target.className.match(/box/)) {
// 允许拖动
dragging = true; // 设置当前 box 的 id 为 moving_box
if(document.getElementById("moving_box") !== null) {
document.getElementById("moving_box").removeAttribute("id");
}
e.target.id = "moving_box"; // 计算坐标差值
diffX = startX - e.target.offsetLeft;
diffY = startY - e.target.offsetTop; }
else {
//如果页面已经画出了box,则不能画出第二个box
if(existbox===true){
return false;
}
// 在页面创建 box
var active_box = document.createElement("div");
active_box.id = "active_box";
active_box.className = "box";
active_box.setAttribute("name","box");
active_box.style.top = startY + 'px';
active_box.style.left = startX + 'px';
document.body.appendChild(active_box);
active_box = null;
}
//防止浏览器拖动图片乱动
e.preventDefault();
}; // 鼠标移动
document.onmousemove = function(e) {
// 更新 box 尺寸
if(document.getElementById("active_box") !== null) { var ab = document.getElementById("active_box");
ab.style.width = e.pageX - startX + 'px';
ab.style.height = e.pageY - startY + 'px'; canvasimg(e);
} // 移动，更新 box 坐标
if(document.getElementById("moving_box") !== null && dragging) { var mb = document.getElementById("moving_box");
var img = document.getElementById('imghead'); mb.style.top = e.pageY - diffY + 'px';
mb.style.left = e.pageX - diffX + 'px'; canvasimg(e);
}
}; // 鼠标抬起
document.onmouseup = function(e) {
// 禁止拖动
dragging = false;
if(document.getElementById("active_box") !== null) {
var ab = document.getElementById("active_box");
ab.removeAttribute("id");
existbox=true;
// 如果长宽均小于 3px，移除 box
if(ab.offsetWidth < 3 || ab.offsetHeight < 3) {
document.body.removeChild(ab);
existbox=false;
}
}
};
3方框选中的内容我们使用canvas的drawImage方法画出来即可。接上文代码：
function canvasimg(e){
var img=document.getElementById("imghead");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.style.display="block";
if(document.getElementById("active_box") !== null) {
var ab = document.getElementById("active_box");
ab.style.width = e.pageX - startX + 'px';
ab.style.height = e.pageY - startY + 'px';
c.height=parseInt(ab.style.height);
c.width=parseInt(ab.style.width);
ctx.drawImage(img,startX-img.offsetLeft,startY-img.offsetTop,parseInt(ab.style.width),parseInt(ab.style.height),0,0,parseInt(ab.style.width),parseInt(ab.style.height));
}
// 移动，更新 box 坐标
if(document.getElementById("moving_box") !== null && dragging) {
var mb = document.getElementById("moving_box");
mb.style.top = e.pageY - diffY + 'px';
mb.style.left = e.pageX - diffX + 'px';
c.height=parseInt(mb.style.height);
c.width=parseInt(mb.style.width);
ctx.drawImage(img,parseInt(mb.style.left)-img.offsetLeft,parseInt(mb.style.top)-img.offsetTop,parseInt(mb.style.width),parseInt(mb.style.height),0,0,parseInt(mb.style.width),parseInt(mb.style.height));
}
}
4 Demo效果和源码下载可以点击demo