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