用canvas实现对图片的处理 使用fileAPI

**HTML部分**
<input type="file" accept="video/*" capture="camcorder" id="file">
<div id="preview" class="upload_preview"></div>
<div id="canvas_div">
<canvas id="canvas_mine"></canvas>
</div>

**js部分**
1、先监听input file change事件
function onSelect(e) {
var files = e.target.files || e.dataTransfer.files;
var html = '';
var file = files[0];
if (file) {
if (file.type.indexOf("image") == 0) {//对上传文件进行过滤
fileType = file.type;
//file.name file.size file.lastModifiedDate
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
//压缩图片
img.onload = function() {
if (img.height > maxHeight) {//按最大高度等比缩放
scale = maxHeight / img.height;
img.width *= maxHeight / img.height;
img.height = maxHeight;
}
//图片压缩
var canvas = $("#canvas_mine").get(0);
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width,canvas.height); // canvas清屏
context.drawImage(img, 0, 0, img.width,img.height);
var image = new Image();
image.src = canvas.toDataURL(file.type);
image.id = "upload_image";
$('#preview').html("");
$('#preview').append(image);
$('.upload_preview').css({'z-index':'2','top':'50%','left':'50%','transform': 'translate(-50%,-50%)'});
console.log($('#preview'))
}
img.src = e.target.result;
console.log(e.target)
img.id = "upload_image_tmp";
$('#preview').html("");
$('#preview').append(img);
$("#message").text("");
};
reader.readAsDataURL(file);
} else {
fileType = "image/jpeg";
$('#preview').html("");
$("#message").text("您上传的不是图片，请重新上传...");
}
} else {
fileType = "image/jpeg";
$('#preview').html("");
$("#message").text("没有找到图片！");
}