用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("没有找到图片！");
    }