js 按指定大小等比缩放预览图片

            $scope.init = function () {
                if (!FileReader) {
                    utils.showError("您的浏览器不支持HTML5，请使用现代浏览器");
                    return;
                }

                ///获取文件的浏览路径
                var getObjectURL = function (file) {
                    var url = null;
                    var blob = new Blob([file], { type: file.type });
                    if (window.createObjectURL != undefined) { // basic
                        url = window.createObjectURL(blob);
                    } else if (window.URL != undefined) { // mozilla(firefox)
                        url = window.URL.createObjectURL(blob);
                    } else if (window.webkitURL != undefined) { // webkit or chrome
                        url = window.webkitURL.createObjectURL(blob);
                    }
                    return url;
                };

                var getReviseWH = function (srcWidth, srcHeight) {
                    var targetWidth = 400;
                    var targetHeight = 400;
                    var res = {};
                    if (srcWidth > targetWidth || srcHeight > targetHeight) {
                        if (srcWidth > srcHeight) {
                            var heightFloat = parseFloat(srcHeight) / parseFloat(srcWidth);
                            heightFloat = heightFloat * targetWidth;
                            res.height = parseInt(heightFloat);
                            res.width = targetWidth;
                        }
                        else {
                            var widthFloat = parseFloat(srcWidth) / parseFloat(srcHeight);
                            widthFloat = widthFloat * targetWidth;
                            res.width = parseInt(widthFloat);
                            res.height = targetHeight;
                        }
                    }
                    else {
                        res = { width: srcWidth, height: srcHeight };
                        return res;
                    }

                    res = getReviseWH(res.width, res.height);
                    return res;
                };

                document.getElementById('uploadInput').outerHTML = document.getElementById('uploadInput').outerHTML;
                $('#uploadInput').on('change', function () {
                    if (this.files.length <= 0) return;
                    var file = this.files[0];
                    if (file.size > 2048 * 1024) {
                        utils.showError("请选择大小不超过2M的图片");
                        return;
                    }

                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = new Image();
                        img.onload = function () {
                            var w = img.naturalWidth;
                            var h = img.naturalHeight;
                            var wh = getReviseWH(w, h);
                            var cvs = document.createElement('canvas');
                            cvs.width = wh.width;
                            cvs.height = wh.height;
                            cvs.getContext('2d').drawImage(img, 0, 0, cvs.width, cvs.height);
                            $scope.imageUri = cvs.toDataURL(file.type, 1);
                            $scope.$apply();
                        }
                        img.src = this.result;
                    }
                    reader.readAsDataURL(file);
                });
            };

            $scope.chooseImageFile = function () {
                document.getElementById('uploadInput').click();

            };

html:

<div class="panel panel-default" style="height:100%;">
    <div class="panel-heading">
        上传图片
    </div>
    <div class="panel-body">
        <div class="row" ng-bind="test"></div>
        <div class="row">
            <div class="col-lg-1"></div>
            <div class="col-lg-3"><button class="btn btn-default" ng-click="chooseImageFile()">选择图片</button></div>
            <div class="col-lg-4" style="color:red;" ng-bind="tips"></div>
            <div class="col-lg-4" style="color:black;">注：GIF在上传预览无法显示动态，上传后可正常显示</div>
        </div>
        <div class="row" style="margin-top:10px;">
            <div class="col-lg-1">预览</div>
            <div class="col-lg-8" style="padding:5px 5px 5px 5px;border:1px solid #c4c4c4;width:410px;height:410px;display:flex;justify-content:center;align-items:center;">
                <img ng-src="{{imageUri}}" />
            </div>
            <div class="col-lg-2" style="display:flex;justify-content:center;align-items:center;">
                <button class="btn btn-primary" ng-click="uploadImage()">上传</button>
            </div>
        </div>
    </div>
</div>
<input type="file" name="file" id="uploadInput" style="display:none;" />


<div style="display:none;" ng-init="init()"></div>