FileReader 与canvas结合使用显示图片

话不多少，直接上代码

function fileChange() {
            var file = this.files[0];
            var imageType = /^image\//;
            //是否是图片
            if (!imageType.test(file.type)) {
                layAlert("请选择图片！");
                loadHide()
                return;
            }
            //判断是否已经上传
            var fileState = false;
            var fileImgs = document.querySelectorAll('.imgName');
            for (var i = 0; i < fileImgs.length; i++) {
                if (fileImgs[i].getAttribute('data-imgname') == file.name) {
                    fileState = true;
                }
            }
            if (fileState == true) {
                tishi('该图片上传过了')
                return;
            }
            fnSetImgRelaod(file)
        }
        function fnSetImgRelaod(file) {
            if (!window.FileReader) {
                layAlert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
                loadHide()
                return
            } else {
                var reader = new FileReader(file);// FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
                reader.readAsDataURL(file);//开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE，如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data:URL格式的字符串以表示所读取文件的内容.
                reader.onload = function (e) {
                    var fileImg = document.createElement('div');
                    $('#fileImg').siblings().show();
                    fileImg.className = 'fileImg prel';
                    document.querySelector('#fileImg').appendChild(fileImg);
                    var canvas = document.createElement("canvas");
                    canvas.className = 'canvas';
                    fileImg.appendChild(canvas);
                    var ctx = canvas.getContext("2d");
                    var image = new Image();
                    image.src = this.result;
                    image.onload = function () {
                        var cw = image.width;
                        var ch = image.height;
                        var w = image.width;
                        var h = image.height;
                        canvas.width = w;
                        canvas.height = h;
                        if (cw > 100 && cw >= ch) {
                            w = 100;
                            h = (100 * ch) / cw;
                            canvas.width = w;
                            canvas.height = h;
                        }
                        if (ch > 100 && ch >= cw) {
                            h = 100;
                            w = (100 * cw) / ch;
                            canvas.width = w;
                            canvas.height = h;

                        }
                        ctx.drawImage(image, 0, 0, w, h);

                        var imgBtn = document.createElement('sapn');
                        imgBtn.className = 'btn pabs';
                        imgBtn.innerText = '删除';
                        fileImg.appendChild(imgBtn);
                        var imgName = document.createElement('div');
                        imgName.className = 'imgName';
                        imgName.innerText = file.name;
                        imgName.setAttribute('data-imgname', file.name);
                        fileImg.appendChild(imgName);

                        imgBtn.onclick = function () {
                            $(this).parent().remove();
                        }
                        canvas.onclick = function () {
                            showImg(e.target.result)
                        }
                    }
                }
            }
        }